Installation
This library is published to npm so you can easily install it with this command :
npm i reactjs-tags-input --save
Quick Start
To start using this component you just need to import 'TagsInput" component from 'reactjs-tags-input' and pass the required 'tags' prop. In that 'tags' prop you just need to pass and array declared on the parent component to contain the tags inputed. See this example code :
Properties
You can easily customize TagsInput component with these props. Change the color, text size and much more. This is the props table :
| Property | Type | required/optional | Description |
|---|---|---|---|
| tags | Array | [required] | You should pass and empty array from the parent component's state to contain all the tags. |
| placeholder | String | [optional] | Pass a text if you want to have a placeholder in your input. |
| placeholder | String | [optional] | Pass a text if you want to have a placeholder in your input. |
| customContainerStyle | Object | [optional] | Pass a reactjs style object if you want to customize the content container. |
| customInputContainerStyle | Object | [optional] | Pass a reactjs style object if you want to customize the input container. |
| tagBackgroundColor | String | [optional] | Pass a css color property to change the background color of the tag. |
| tagTextColor | String | [optional] | Pass a css color property to change the text color of the tag. |
| tagTextSize | Number | [optional] | Pass a css color property to change the text size of the tag. |
| tagTextFamily | String | [optional] | Pass a css color property to change the text family of the tag. |
| inputBackgroundColor | String | [optional] | Pass a css color property to change the background color of the input. |
| inputTextColor | String | [optional] | Pass a css color property to change the text color of the input. |
| inputTextSize | Number | [optional] | Pass a css color property to change the text size of the input. |
| inputTextFamily | String | [optional] | Pass a css color property to change the text family of the input. |
If you have any issue or something to share or ask. Feel free to leave a comment below!
