React library for tag inputs
npm install --save react-field-tagimport React from 'react' import ReactFieldTag from 'react-field-tag' /// add below line to use default styling import 'react-field-tag/dist/index.css' const App = () => { const [tags, setTags] = React.useState<Array<string>>([]); const onAdd = (tag: string) => { setTags([...tags, tag]); } const onDelete = (index: number) => { setTags(tags.filter((_, i) => i !== index)); } return <ReactFieldTag tags={tags} onAdd={onAdd} onDelete={onDelete} /> } export default App
| Name | Type | Description |
|---|---|---|
root? | string | style class for the whole input and tag container |
input? | string | style class for input |
tags? | string | style class for tags container |
tag? | string | style class for tag(s) |
| Name | Type | Description | Default |
|---|---|---|---|
tags | Array of string | an array of tags | - |
delimiter? | string | determines a point at which the string separates into tags | , |
classes? | StyleClasses | style classes for styling | - |
closeIcon? | ReactElement | element to be used as close icon | x (close icon from icons8) |
onAdd | function | a callback function called when a new tag is to be added | - |
onDelete | function | a callback function called on deleting a tag | - |
MIT © iamdipanshusingh