TagButtons is a simple uncontrolled react component that has a list of tags which toggles between selected and deselected state. By default, basic styles are applied, but can be overridden depending on your design requirements.
A Demo is available here.
- Install
react-tag-buttonsusing npm.npm install react-tag-buttons - Import
react-input-rangeto useTagButtonscomponent. - Optionally, import
react-tag-buttons/lib/css/styles.cssif you want to apply the default styling.
Basic implementation:
import React from 'react';
import ReactDOM from 'react-dom';
import TagButtons from 'react-tag-buttons';
const tagsList = [
{id:1, text:"Apple"},
{id:2, text:"Ball"},
{id:3, text:"Cat"},
{id:4, text:"Dog"},
{id:5, text:"Engineer"}
];
class App extends Component {
constructor(props){
super(props);
this.state = {
selectedDataSource: []
};
}
onTagClick = (currSelectedState, id, text) => {
let {selectedDataSource} = this.state;
if(!currSelectedState){
selectedDataSource.push({id:id, text:text});
}else{
selectedDataSource = selectedDataSource.filter((item)=>{return item.id !== id});
}
this.setState({
selectedDataSource: selectedDataSource
});
};
render() {
const {selectedDataSource} = this.state;
return (
<div>
<TagButtons
dataSource={tagsList}
selectedDataSource={selectedDataSource}
onTagClick={this.onTagClick}
/>
<div>
<h4>Selected Tags</h4>
<div>
{selectedDataSource.map((item)=>{return <p>{item.text}</p>})}
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);List of objects which is to be displayed as tags. e.g
dataSource = [{
ssn : 123456789,
name: "Ashwin"
}]
This is the configuration for our item in dataSource. It is an object which takes three properties:
e.g
dataSourceConfig = {
id: "ssn",
text: "name"
}
custom view e.g
dataSource = [{
ssn : 123456789,
name: "Ashwin",
display: <div><p>Ashwin</p></div>
}]
dataSourceConfig = {
id: "ssn",
text: "name",
view: "display"
}
Called everytime a tag is clicked.
Adds a prefix to the all the classes, default is "selectable"