Simple tagging component.
https://jfusco.github.io/react-tagging-input
From the root of your project.
npm install react-tagging-input --save
Simple implementation of tags. See options available below.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Tags from 'react-tagging-input';
class Application extends Component{
state = {
tags: ['foo', 'bar']
};
constructor(props){
super(props);
}
onTagAdded(tag) {
this.setState({
tags: [...this.state.tags, tag]
});
}
onTagRemoved(tag, index) {
this.setState({
tags: this.state.tags.filter((tag, i) => i !== index)
});
}
render(){
return (
<div>
<Tags
tags={this.state.tags}
placeholder="Add a tag"
onAdded={this.onTagAdded.bind(this)}
onRemoved={this.onTagRemoved.bind(this)} />
</div>
);
}
}
render(<Application />, document.getElementById('application'));
An array
of tags to be passed in and rendered right away in the component
state = {
tags: ['foo', 'bar']
};
<Tags tags={this.state.tags} />
A string
used as placeholder text in the tags input field
<Tags placeholder="Add a tag" />
An array
of keyCodes used to tell the tags component which delimiter to use to add a tag
Here is more info and a list of keyCodes
<Tags addKeys={[13, 9, 32, 188]} />
A function
fired when a new tag is added - returns a string
of the new tag
onTagAdded(tag){
console.log(`new tag: ${tags}`);
}
<Tags onAdded={this.onTagAdded} />
A function
fired when a new tag is deleted - returns a string
of the tag that was deleted
onTagRemoved(tag, index){
console.log(`deleted tag: ${tag} at index ${index}`);
}
<Tags onRemoved={this.onTagRemoved.bind(this)} />
An integer
representing the maximum number of tags that are allowed to be added
<Tags maxTags={10} />
A boolean
that sets the tag component to read only mode. No adding or removing tags and pointer events
<Tags readOnly={true} />
The element
to be used for the delete icon
const removeIcon = () => {
return (
<i class="my-custom-icon"></i>
);
}
<Tags removeTagsIcon={removeIcon()} />
A boolean
that allows the same tag to be added more than once
//-- Only allow unique tags to be added
<Tags uniqueTags={true} />
The string
to be used for the ID of the component
<Tags id="my-tags-component" />
Import the main SCSS file in to your application SCSS files
@import "node_modules/react-tagging-input/src/component/scss/styles.scss";
There are a few variables set to !default
that can be overriden. If you need to change it more just override the actual styles.
Any overriden variables needs to go above the @import
statement to take effect
//-- Global UI
$tag-base-height
$tag-base-font-size
$tag-base-border-radius
$tag-base-font-color
$tag-base-margin
$tag-base-font-family
//-- Tags
$tag-background-color
$tag-background-hover-color
$tag-remove-color
$tag-remove-font-size
$tag-remove-hover-color
//-- Input
$tag-input-bg-color
$tag-input-border
$tag-input-placeholder-color
If you don't care to override variables and just want to override actual styles you may choose to import the compiled version of the css instead
@import "node_modules/react-tagging-input/dist/styles.css";
npm test