React Tag Autocomplete is a simple tagging component ready to drop in your React projects. Originally based on the React Tags project by Prakhar Srivastav this version removes the drag-and-drop re-ordering functionality, adds appropriate roles and ARIA states and introduces a resizing text input.
The preferred way of using the component is via NPM
npm install --save react-tag-autocomplete
Here's a sample implementation that initializes the component with a list of preselected tags
and a suggestions
list. For more details, go through the API.
var ReactTags = require('react-tag-autocomplete');
var App = React.createClass({
getInitialState: function() {
return {
tags: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Pears" }
],
suggestions: [
{ id: 3, name: "Bananas" },
{ id: 4, name: "Mangos" },
{ id: 5, name: "Lemons" },
{ id: 6, name: "Apricots" }
]
}
},
handleDelete: function(i) {
var tags = this.state.tags;
tags.splice(i, 1);
this.setState({ tags: tags });
},
handleAddition: function(tag) {
var tags = this.state.tags;
tags.push({
id: tags.length + 1,
name: tag
});
this.setState({ tags: tags });
},
render: function() {
return (
<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleDelete={this.handleDelete}
handleAddition={this.handleAddition} />
)
}
});
React.render(<App />, document.getElementById('app'));
tags
suggestions
delimiters
placeholder
autofocus
autoresize
minQueryLength
maxSuggestionsLength
classNames
handleAddition
handleDelete
handleInputChange
allowNew
An array of tags that are displayed as pre-selected. Each tag must have an id
and a name
property. Default: []
.
var tags = [
{ id: 1, name: "Apples" },
{ id: 2, name: "Pears" }
];
An array of suggestions that are used as basis for showing suggestions. Each suggestion must have an id
and a name
property and an optional disabled
property. Default: []
.
var suggestions = [
{ id: 3, name: "Bananas" },
{ id: 4, name: "Mangos" },
{ id: 5, name: "Lemons" },
{ id: 6, name: "Apricots", disabled: true }
];
An array of keycodes which should terminate tags input. Default: [13, 9]
.
The placeholder string shown for the input. Default: 'Add new tag'
.
Boolean parameter to control whether the text-input should be autofocused on mount. Default: true
.
Boolean parameter to control whether the text-input should be automatically resized to fit its value. Default: true
.
How many characters are needed for suggestions to appear. Default: 2
.
Maximum number of suggestions to display. Default: 6
.
Override the default class names. Defaults:
{
root: 'ReactTags',
tagInput: 'ReactTags__tagInput',
selected: 'ReactTags__selected',
tag: 'ReactTags__tag',
tagName: 'ReactTags__tagName',
suggestions: 'ReactTags__suggestions',
isActive: 'is-active',
isDisabled: 'is-disabled'
}
Function called when the user wants to add a tag. Receives the tag.
function(tag) {
// Add the tag { id, name } to the tag list
tags.push(tag);
}
Function called when the user wants to delete a tag. Receives the tag index.
function(i) {
// Delete the tag at index i
tags.splice(i, 1);
}
Optional event handler when the input changes. Receives the current input value.
function(input) {
if (this.state.busy) {
return;
} else {
this.setState({ busy: true });
return fetch(`query=${input}`).then(function(result) {
this.setState({ busy: false });
});
}
}
Allows users to add new (not suggested) tags. Default: false
.
To enable it, just add allowNew
as a component property:
<ReactTags
handleDelete={this.handleDelete}
handleAddition={this.handleAddition}
allowNew />
It is possible to customize the look of the component the way you want it. An example can be found in /example/styles.css
.
The component is written in ES6 and uses Webpack as its build tool.
npm install
npm run dev # open http://localhost:8090
Got ideas on how to make this better? Open an issue! I'm yet to add tests so keep your PRs on hold ๐