react-tagsinput

Simple React component for inputing tags.

Demo

Install

npm install react-tagsinput --save

or

bower install react-tagsinput --save

Example

import TagsInput from 'react-tagsinput'

class TestComponent extends React.Component {
  constructor() {
    super()
    this.state = {tags: []}
  }

  handleChange(tags) {
    this.setState({tags})
  }

  render() {
    return <TagsInput value={this.state.tags} onChange={::this.handleChange} />
  }
}

Interface

Props

value (required)

An array of tags.

onChange (required)

Callback when tags change.

addKeys

An array of key codes that add a tag, default is [9, 13] (Tab and Enter).

onlyUnique

Allow only unique tags, default is false.

validationRegex

Allow only tags that pass this regex to be added. Default is /.*/.

maxTags

Allow limit number of tags, default is -1 for infinite.

addOnBlur

Add a tag if input blurs.

removeKeys

An array of key codes that remove a tag, default is [8] (Backspace).

tagProps

Props passed down to every tag component. Defualt is: {className: 'react-tagsinput-tag', classNameRemove: 'react-tagsinput-remove'}.

inputProps

Props passed down to input. Default is: {className: 'react-tagsinput-input'}

renderTag

Render function for every tag. Default is:

function defaultRenderTag (props) {
  let {tag, key, onRemove, ...other} = props
  return (
    <span key={key} {...other}>
      {tag}
      <a onClick={(e) => onRemove(key)} />
    </span>
  )
}

renderInput

Render function for input. Default is:

function defaultRenderInput (props) {
  let {onChange, value, ...other} = props
  return (
    <input type='text' onChange={onChange} value={value} {...other} />
  )
}

renderLayout

Renders the layout of the component. Takes tagComponents and inputComponent as args. Default is:

function defaultRenderLayout (tagComponents, inputComponent) {
  return (
    <span>
      {tagComponents}
      {inputComponent}
    </span>
  )
}

Styling

Look at react-tagsinput.css for a basic style.

Contributors

• Ola Holmström (@olahol)
• Dmitri Voronianski (@voronianski)
• Artem Vovsya (@avovsya)
• scott c (@scoarescoare)
• junk (@jedverity)
• Buz Carter (@buzcarter)
• Garbin Huang (@garbin)
• Will Washburn (@willwashburn)
• Kristján Oddsson (@koddsson)
• Vojtěch Bartoš (@VojtechBartos)
• Ming Fang (@mingfang)
• Chris Adams (@thecadams)
• Domenico Matteo (@dmatteo)
• Kevin Smith (@ksmth)
• Gaurav Tiwari (@gauravtiwari)
• Tay Yang Shun (@yangshun)
• Trevor Hutto (@huttotw)
• David L. Goldberg (@DavidLGoldberg)
• Pedro J. Parra (@pedroparra)
• Kasper Nilsson (@k-nilsson)
• Jorge (@JorgeAguirreLeon)
• khawerrind (@khawerrind)

MIT Licensed