Description:
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:
