A react material-ui tag input component for entering multiple string values.
npm install react-materialui-tag-input
npm install react-materialui-tag-input
`
or using yarn:
`
yarn add react-materialui-tag-input
`
You can now use react-materialui-tag-input in your project like so:
`
import TagInput from 'react-materialui-tag-input'
...
`
You can also import the type definitions if you're using TypeScript like so:
`
import TagInput, { IInputInterface } from 'react-materialui-tag-input'
...
`
Basic Demo
!Alt demo
Basic Example
`
// your-component.js
import TagInput from 'react-materialui-tag-input'
// create state handler for the tags
const [inputTags, setInputTags] = useState([])
return (
)
`
Or optionally, create a function to handle updates to the tag list. The function receives the updated tag list and can do operations on the list data before updating the inputTags state.
`
// your-component.js
import TagInput from 'react-materialui-tag-input'
// create state handler for the tags
const [inputTags, setInputTags] = useState([])
// tag update function
const updateTags = (newTags) => {
// perform any operation with the data before updating the inputTags state
setInputTags(newTags)
}
return (
)
`
Available props
tags - Array of Strings (Required)
This prop expects an array of strings that represents the data to be displayed in each tag.
Implementation is as shown in the example above.
`
tags: string[] (required)
`
setTags - Function (Required)
This prop expects a callback function that is called when a new tag is added/removed from the array. An array of the updated tags is passed into the function.
Implementation is as shown in the example above.
`
setTags: (tags: string[]) => void (required)
`
initialValue - String (Optional)
This prop expects a string value that will be passed into the component's input field as the pre-filled value (especially useful for pre-filled forms)
`
...
...
`
innerRef - (Optional)
This prop expects a React.ref element that is passed into the component's input field. (Useful for getting a reference to the input field, to carry out functions like auto-focusing the input field)
`
...
const inputRef = React.useRef(null);
...
...
`
onFocus - Function (Optional)
This prop expects a function that will be called when the input field gains focus.
`
...
const onInputFocus = (event) => {
console.log("The input field has gained focus")
};
...
...
`
onBlur - Function (Optional)
This prop expects a function that will be called when the input field loses focus.
`
...
const onInputBlur = (event) => {
console.log("The input field has lost focus")
};
...
...
`
allowBackspace - Boolean (Optional)
This prop expects a boolean value that defaults to false. By default, when the input field is in focus, the component removes the last tag element if the backspace button is clicked on and the input field is empty. You can turn off this feature by setting allowBackspace to true
`
...
...
`
allowDuplicate - Boolean (Optional)
This prop expects a boolean value that defaults to false. By default, if a new tag is added, that already exists in the tags array, the duplicate value is not added, instead the input field is cleared. You can turn off this feature by setting allowDuplicate to true
`
...
...
`
inputProps - Object (Optional)
This prop expects a key-value object containing props for the component's input field. Any prop that can be passed into material-ui Input component can ideally be added here. This includes className, id, style, placeholder e.t.c.
`
...
setTags={updateTags}
inputProps={{
id: "tag_input",
placeholder: "Enter tag",
className: classes.inputContainer,
style: {
fontSize: "16px",
},
}}
/>
...
`
NB - The classes.inputContainer in the example above is from a @mui/styles or @emotion/react type of styling. You can also use a regular className styling here
chipProps - Object (Optional)
This prop expects a key-value object containing props that are passed into each of the component's tag/chip containers. Any prop that can be passed into material-ui Chip component can ideally be added here. This includes variant, color, size, e.t.c.
`
...
setTags={updateTags}
chipProps={{
variant: "outlined",
color: "primary",
size: "medium"
}}
/>
...
``