TagInput

#### TagInput is a customizable React component that provides an input field for entering both simple text and tags in content-editable text input.

#### With TagInput, you can easily create tag input fields for your web applications without having to worry about complex implementation details.

$3

To use TagInput in your React project, simply install it via NPM:

``shell
npm install @pradeepmishra/taginput
`

Then, import it into your project:

`jsx
import TagInput from '@pradeepmishra/taginput';
`

$3

TagInput has peer dependencies of the following npm libraries

1. react
2. slate
3. slate-react

make sure you have them all in your project's dependencies.

$3

TagInput can be used like any other React component, with props for customization:

`jsx
removeTagButton={false}
initValue='Initial {{tag}} value'
onValueChange={(value) => console.log(New value: ${value})}
addImageElement={(tagContent) => (
https://example.com/${tagContent}} />
)}
transformInputText={(tagContent) => tagContent.toUpperCase()}
transformInputElement={(tagContent) => (
{tagContent}
)}
/>
`

$3

removeTagButton: Boolean (optional) - hide the delete button in all tags (default: false).

initValue: String (optional) - provides an initial value for the input field (default: "").

onValueChange: Function (optional) - called when the value of the input field changes. The new value is passed as an argument to the function.

addImageElement: Function (optional) - called when a new tag is added. The content of the tag is passed as an argument to the function, and the function should return a valid HTML element to be displayed in the tag.

transformInputText: Function (optional) - called when a new tag is added. The content of the tag is passed as an argument to the function, and the function should return a transformed string to be displayed in the tag.

transformInputElement: Function (optional) - called when a new tag is added. The content of the tag is passed as an argument to the function, and the function should return a transformed HTML element to be displayed in the tag.

capturePattern`: RegExp (optional) - Provide a regex pattern to capture text to identify a tag.

$3

TagInput is released under the MIT License.
Feel free to use it in your personal or commercial projects. If you have any questions or issues, please feel free to open an issue on the Github repository.

$3

Pradeep Mishra
Github
Twitter
Linkedin

#### Demo site

https://ce-taginput.netlify.app/

$3

!Rendered