react-input-tags | demo

React component for tagging inputs.

Getting Started

Install Package

npm install --save react-input-tags

Use Package

import React from 'react';
import { InputTagsContainer } from 'react-input-tags';

export class TagsExample extends React.Component {
  state = {
    tags: [],
  }

  handleUpdateTags = (tags) => {
    this.setState({ tags });
  }

  render() {
    return (
      <InputTagsContainer
        tags={this.state.tags}
        handleUpdateTags={this.handleUpdateTags}
      />
    );
  }
}

API

Both the high-level InputTagsContainer component or the low-level InputTags component are exported for use.

InputTagsContainer

Property	Type	Required	Description
tags	Array	✓	An array of data that represents the value of the tags
handleUpdateTags	Function	✓	A function called when the value of tags changes, passes the tags value as an argument.
getTagValue	Function		A function called when a tag is edited, passes the tag as an argument.
createTag	Function		A function called when a tag is to be inserted, passes the input value as an argument.
inputPlaceholder	String		The placeholder to populate the input with
inputTabIndex	Number		The tab index for the input
inputMaxWidth	Number		The max width the input can take up in pixels
suggestions	Array		An array of data that represents the value of the suggestions
handleUpdateSuggestions	Function		A function called when the value of input changes, passes the input value as an argument.
getSuggestionValue	Function		A function called when a suggestion is selected, passes the suggestion value as an argument.
suggestionsAreLoading	Boolean		Whether the suggestions are loading or not.
InputTagsContainerImplementation	Function		A function called when InputTagsContainer component is to be rendered.
InputTagsImplementation	Function		A function called when InputTags component is to be rendered.
InputImplementation	Function		A function called when Input component is to be rendered.
TagImplementation	Function		A function called when Tag component is to be rendered.
SuggestionListImplementation	Function		A function called when SuggestionList component is to be rendered.
SuggestionImplementation	Function		A function called when Suggestion component is to be rendered.
SuggestionsLoaderImplementation	Function		A function called when SuggestionsLoader component is to be rendered.
InputTagsClassName	String		A class for the InputTags component.
InputClassName	String		A class for the Input component.
TagClassName	String		A class for the Tag component.
SuggestionListClassName	String		A class for the SuggestionList component.
SuggestionClassName	String		A class for the Suggestion component.
SuggestionsLoaderClassName	String		A class for the SuggestionsLoader component.

InputTags

Property	Type	Required	Description
tags	Array	✓	An array of data that represents the value of the tags
handleInsert	Function	✓	A function called when a tag will be inserted, passes the current tags value and new tag value as arguments.
handleRemove	Function	✓	A function called when a tag will be removed, passes the current tags value and index of the tag to be removed as arguments.
getTagValue	Function		A function called when a tag is edited, passes the tag as an argument.
createTag	Function		A function called when a tag is to be inserted, passes the input value as an argument.
inputPlaceholder	String		The placeholder to populate the input with
inputTabIndex	Number		The tab index for the input
inputMaxWidth	Number		The max width the input can take up in pixels
suggestions	Array		An array of data that represents the value of the suggestions
handleUpdateSuggestions	Function		A function called when the value of input changes, passes the input value as an argument.
getSuggestionValue	Function		A function called when a suggestion is selected, passes the suggestion value as an argument.
suggestionsAreLoading	Boolean		Whether the suggestions are loading or not.
InputTagsImplementation	Function		A function called when InputTags component is to be rendered.
InputImplementation	Function		A function called when Input component is to be rendered.
TagImplementation	Function		A function called when Tag component is to be rendered.
SuggestionListImplementation	Function		A function called when SuggestionList component is to be rendered.
SuggestionImplementation	Function		A function called when Suggestion component is to be rendered.
SuggestionsLoaderImplementation	Function		A function called when SuggestionsLoader component is to be rendered.
InputTagsClassName	String		A class for the InputTags component.
InputClassName	String		A class for the Input component.
TagClassName	String		A class for the Tag component.
SuggestionListClassName	String		A class for the SuggestionList component.
SuggestionClassName	String		A class for the Suggestion component.
SuggestionsLoaderClassName	String		A class for the SuggestionsLoader component.