react-tagging-input

Below are a few implementations of the component, for more options and events please see the README file documentation

Tests

View coverage report here

Default implementation

    state = {
  tags: []
}

onTagAdded(tag) {
  this.setState({
    tags: [...this.state.tags, tag]
  });
}

onTagRemoved(tag, index) {
  this.setState({
    tags: this.state.tags.filter((tag, i) => i !== index)
  });
}

<Tags
  tags={this.state.tags}
  onAdded={this.onTagAdded.bind(this)}
  onRemoved={this.onTagRemoved.bind(this)} />

    Initial tags

    Pass in some default tags to the component.

    state = {
  tags: ['foo', 'bar']
}

<Tags tags={this.state.tags} />

    Read only tags

    Tags cannot be deleted or added.

    • read
    • only
    • tags
    <Tags readOnly={true} />

    Custom delete button

    Tags are able to have a custom delete element or a string.

    • delete one--
    • delete two--
    <Tags removeTagIcon="delete" />
    //-- Custom element
const removeIcon = <span>--</span>;

<Tags removeTagIcon={removeIcon} />

    Unique tags

    The same tag can never be added twice.

    <Tags uniqueTags={true} />