React Tag Content
This Fork of the React Tag Autocomplete project adds a new prop renderTagContent
to the ReactTags component.
This allows to render whatever you want inside the added tags. See the example for more information.
React Tag Autocomplete
React Tag Autocomplete is a simple tagging component ready to drop in your React projects. This is a fork of the original React Tags project by Prakhar Srivastav. This version cleans out a few options, removes the drag-and-drop re-ordering functionality and adds appropriate roles and ARIA states.
Installation
npm install --save react-tag-content
Usage
Here's a sample implementation that initializes the component with a list of initial tags
and suggestions
list. Apart from this, there are multiple events, handlers for which need to be set. 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 (
<div>
<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleDelete={this.handleDelete}
handleAddition={this.handleAddition} />
</div>
)
}
});
React.render(<App />, document.getElementById('app'));
Options
renderTagContent
tags
suggestions
busy
delimiters
placeholder
autofocus
minQueryLength
handleAddition
handleDelete
handleInputChange
- [
allowBackspaceRemoving
]
renderTagContent (optional)
A function that returns a react component to be rendered inside an added tag. the function gets called with tag and index.
const renderTagContent = (tag, index) => <div>{`This is custom content of the tag ${tag.name}`}</div>
If you return null instead of a react component, the default tags are used (as if you hadn't supplied the prop)
tags (optional)
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" }
];
suggestions (optional)
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 }
];
busy (optional)
A boolean flag used to display the busy indicator or not. Useful when loading new suggestions
asynchronously. Default: false
.
delimiters (optional)
An array of keycodes which should terminate tags input. Default: [13, 9]
.
placeholder (optional)
The placeholder string shown for the input. Default: 'Add new tag'
.
autofocus (optional)
Boolean parameter to control whether the text-input should be autofocused on mount. Default: true
.
minQueryLength (optional)
How many characters are needed for suggestions to appear. Default: 2
.
handleAddition (required)
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);
}
handleDelete (required)
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);
}
handleInputChange (optional)
Optional event handler when the input changes. Receives the current input value.
function(input) {
if (this.state.busy) {
return;
} else {
this.setState({ busy: true });
fetch(`query=${input}`).then(function(result) {
this.setState({ busy: true });
});
}
}
Styling
<ReactTags>
does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. The component provides the following classes with which you can style:-
ReactTags
ReactTags__tagInput
ReactTags__busy
ReactTags__selected
ReactTags__tag
--ReactTags__tag_simple
--ReactTags__tag_content
--ReactTags__tag_content_close
ReactTags__remove
ReactTags__suggestions
An example can be found in /example/styles.css
.
Dev
The component is written in ES6 and uses Webpack as its build tool.
npm install
npm run dev # open http://localhost:8090
Contributing
Got ideas on how to make this better? Open an issue! I'm yet to add tests so keep your PRs on hold
Thanks
The autocomplete dropdown is inspired by Lea Verou's awesomeplete library.