Tag-Input (with React)
A react component that renders an input field. When hitting enter or entering a comma, the value will be used to create a tag. Tags are displayed in front of the input.
Install
Install as node dependency:
npm install tag-input --save
Quickstart
To test locally change to node_modules/tag-input and run:
npm start & npm run watch
Commands
npm run build
- build production css and jsnpm run watch
- compile css and jsnpm run watch:test
- run tests on changenpm start
- start static dev servernpm test
- run lint and tests
Usage
- Version 2.x
- Version 1.3 (deprecated)
Version 2.x
The userInput
and tags
states have been removed in order to make it the componetn reusable in situations where it was used as a child component.
In order to make use of this component a parent component is required. The parent component manages the userInput and tags state. It listens to changes and re-renderers the tag-input
component. Have a look at the following example:
'use strict'; var React = ;var tagInputComponent = ; var tagInputContainer = React; React;
Version 1.3
var React = ;var tagInput = ; React;
Component Props
onInputChange
: called whenever the input value is changed.onTagChange
: called when a tag is added or removed. Called with tags array.minTagLength
: Set the minimum character length of a tag. Default is 3.cssClass
: optional css class for containertags
: array of strings that represent the tagsuserInput
: the value of the input
License
MIT