Modern React Tagging Component – react-tag-box

react-tag-box is a React component for creating, selecting and removing tags in a text field.

Installation:

# NPM
$ npm install react-tag-box --save

Basic Usage:

import { List } from 'immutable'
import React, { Component } from 'react'
import { TagBox } from 'react-tag-box'
import './styles.scss'

const sampleTags = List(
  ['foo', 'bar', 'baz', 'blitz', 'quux', 'barf', 'balderdash'].map(t => ({
    label: t,
    value: t
  }))
)

export default class BackspaceDeletion extends Component {
  state = {
    tags: sampleTags,
    selected: sampleTags.take(1)
  }

  render() {
    const { tags, selected } = this.state
    const onSelect = tag => {
      const newTag = {
        label: tag.label,
        value: tag.value || tag.label
      }

      this.setState({
        selected: selected.push(newTag)
      })
    }

    const remove = tag => {
      this.setState({
        selected: selected.filter(t => t.value !== tag.value)
      })
    }

    const placeholder = selected.isEmpty() ? '' :
      "Use the backspace key to delete the last tag"

    return (
      <TagBox
        tags={tags.toJS()}
        selected={selected.toJS()}
        onSelect={onSelect}
        removeTag={remove}
        backspaceDelete={true}
        placeholder={placeholder}
      />
    )
  }
}

Props.

selected: PropTypes.arrayOf(TagProp),
onSelect: PropTypes.func.isRequired,
renderNewOption: PropTypes.func,
removeTag: PropTypes.func.isRequired,
renderTag: PropTypes.func,
loadingText: PropTypes.string,
selectedText: PropTypes.string,
placeholder: PropTypes.string,
search: PropTypes.func,
exactMatch: PropTypes.func

Preview:

Download Details:

Author: sslotsky

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/sslotsky/react-tag-box

License: MIT