3.0.4 • Published 6 years ago

react-input-tags2 v3.0.4

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

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

PropertyTypeRequiredDescription
tagsArrayAn array of data that represents the value of the tags
handleUpdateTagsFunctionA function called when the value of tags changes, passes the tags value as an argument.
getTagValueFunctionA function called when a tag is edited, passes the tag as an argument.
createTagFunctionA function called when a tag is to be inserted, passes the input value as an argument.
inputPlaceholderStringThe placeholder to populate the input with
inputTabIndexNumberThe tab index for the input
inputMaxWidthNumberThe max width the input can take up in pixels
suggestionsArrayAn array of data that represents the value of the suggestions
handleUpdateSuggestionsFunctionA function called when the value of input changes, passes the input value as an argument.
getSuggestionValueFunctionA function called when a suggestion is selected, passes the suggestion value as an argument.
suggestionsAreLoadingBooleanWhether the suggestions are loading or not.
InputTagsContainerImplementationFunctionA function called when InputTagsContainer component is to be rendered.
InputTagsImplementationFunctionA function called when InputTags component is to be rendered.
InputImplementationFunctionA function called when Input component is to be rendered.
TagImplementationFunctionA function called when Tag component is to be rendered.
SuggestionListImplementationFunctionA function called when SuggestionList component is to be rendered.
SuggestionImplementationFunctionA function called when Suggestion component is to be rendered.
SuggestionsLoaderImplementationFunctionA function called when SuggestionsLoader component is to be rendered.
InputTagsClassNameStringA class for the InputTags component.
InputClassNameStringA class for the Input component.
TagClassNameStringA class for the Tag component.
SuggestionListClassNameStringA class for the SuggestionList component.
SuggestionClassNameStringA class for the Suggestion component.
SuggestionsLoaderClassNameStringA class for the SuggestionsLoader component.

InputTags

PropertyTypeRequiredDescription
tagsArrayAn array of data that represents the value of the tags
handleInsertFunctionA function called when a tag will be inserted, passes the current tags value and new tag value as arguments.
handleRemoveFunctionA function called when a tag will be removed, passes the current tags value and index of the tag to be removed as arguments.
getTagValueFunctionA function called when a tag is edited, passes the tag as an argument.
createTagFunctionA function called when a tag is to be inserted, passes the input value as an argument.
inputPlaceholderStringThe placeholder to populate the input with
inputTabIndexNumberThe tab index for the input
inputMaxWidthNumberThe max width the input can take up in pixels
suggestionsArrayAn array of data that represents the value of the suggestions
handleUpdateSuggestionsFunctionA function called when the value of input changes, passes the input value as an argument.
getSuggestionValueFunctionA function called when a suggestion is selected, passes the suggestion value as an argument.
suggestionsAreLoadingBooleanWhether the suggestions are loading or not.
InputTagsImplementationFunctionA function called when InputTags component is to be rendered.
InputImplementationFunctionA function called when Input component is to be rendered.
TagImplementationFunctionA function called when Tag component is to be rendered.
SuggestionListImplementationFunctionA function called when SuggestionList component is to be rendered.
SuggestionImplementationFunctionA function called when Suggestion component is to be rendered.
SuggestionsLoaderImplementationFunctionA function called when SuggestionsLoader component is to be rendered.
InputTagsClassNameStringA class for the InputTags component.
InputClassNameStringA class for the Input component.
TagClassNameStringA class for the Tag component.
SuggestionListClassNameStringA class for the SuggestionList component.
SuggestionClassNameStringA class for the Suggestion component.
SuggestionsLoaderClassNameStringA class for the SuggestionsLoader component.