Awesome Open Source
Awesome Open Source

react-input-tags | demo

React component for tagging inputs.

example

npm version dependencies travis-ci status

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.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (69,571
react (5,363
component (565
autocomplete (177
input (119
tags (74
token (60
tokenizer (50
tagging (38
tag (32
autosuggest (16