Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-tag-box
Advanced tools
A React component for creating, selecting, and removing tags. This library focuses entirely on tagging rather than attempting to be a generic autocomplete library, because we think that single responsibility and custom built solutions are good things.
Check out our demo on gh-pages.
react-tag-box
manages Tag
objects in the form of { label: String, value: Any }
, and supports both preloaded and asynchronous autocomplete options by providing
two different components: TagBox
and TagBoxAsync
. Both components accept the following common properties:
Property Name | Type | Required | Description |
---|---|---|---|
selected | Array<Tag> | true | The list of currently selected tags |
onSelect | function(tag) | true | Function to be executed when a tag is selected or submitted |
removeTag | function(tag) | true | Function called when the remove button is clicked on a tag |
renderNewOption | function(text) | false | Function for overriding the default Add ${input} prompt |
selectedText | string | false | Text to display when the search input is already a selected tag. 'Already Selected' by default. |
renderTag | function(tag, remove) | false | Function to override default tag rendering |
placeholder | string | false | Override default placeholder text |
backspaceDelete | bool | false | Whether or not the backspace key should delete the last tag. false by default |
search | function(tag, input) | false | Function to determine if a given tag should be included in the autocomplete suggestions for a given input. |
exactMatch | function(tag, input) | false | Function to determine if the tag matches the input. |
Users provide the following props in addition to the common props:
Property Name | Type | Required | Description |
---|---|---|---|
tags | Array<Tag> | true | The List of all tags |
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 App extends Component {
state = {
tags: sampleTags,
selected: List.of(sampleTags.first())
}
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)
})
}
// optional
// default behavior is case-sensitive search within tag label, like so:
// (tag, input) => tag.label.includes(input)
const search = (tag, input) => {
tag.label.toLowerCase().includes(input.toLowerCase())
}
// optional
// default behavior is case-sensitive match against tag label, like so:
// (tag, input) => tag.label === input
const exactMatch = (tag, input) => {
tag.label.toLowerCase() === input.toLowerCase();
}
return (
<div style={{ width: '50%' }}>
<TagBox
tags={unselected.toJS()}
selected={tags.toJS()}
onSelect={onSelect}
removeTag={remove}
search={search}
exactMatch={exactMatch}
/>
</div>
)
}
}
Users provide the following props in addition to the common props:
Property Name | Type | Required | Description |
---|---|---|---|
fetch | function(text) | true | A function that returns a promise which resolves the tags to populate the autocomplete. |
loadingText | string | false | Text to display when results are being fetched. 'Loading...' by default. |
import { List } from 'immutable'
import React, { Component } from 'react'
import { TagBoxAsync } from 'react-tag-box'
import './styles.scss'
// Mock server data. This would normally be in your database.
const sampleTags = List(
['foo', 'bar', 'baz', 'blitz', 'quux', 'barf', 'balderdash'].map(t => ({
label: t,
value: t
}))
)
// Mock http request. This would normally make a request to your server to fetch matching tags.
const fetch = input => {
return new Promise(resolve => {
setTimeout(() => {
resolve(sampleTags.filter(t => t.label.includes(input)).toJS())
}, 1500)
})
}
export default class Async extends Component {
state = {
selected: sampleTags.take(1)
}
render() {
const { 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 (
<TagBoxAsync
fetch={fetch}
selected={selected.toJS()}
onSelect={onSelect}
removeTag={remove}
backspaceDelete={true}
placeholder={placeholder}
/>
)
}
}
FAQs
A tagging component in React. Select, create, and delete tags.
The npm package react-tag-box receives a total of 295 weekly downloads. As such, react-tag-box popularity was classified as not popular.
We found that react-tag-box demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.