Fork me on GitHub

Re - Tag

React.js Tag Component

By Vikram

Demo 1

In-line tags, just like in gmail. This has the following props set : breaks, handleBlur & handleEnter.
You supply an array of chars that split a tag in the breaks prop ( , . ; and SPACE in this demo)
You can type something and change focus to some other element to check out handleBlur
You can hit enter to create tag cos we set handleEnter

Demo 2

Tags appear in the next line. This doesn't handle Enter key or Blur events.
By default only SPACE and , are used to split tags
You can also provide options on the model to handle add and delete events. This one for example, will add tags as lower-case, will not allow duplicates and won't let you delete first 5 tags

You can check out Demo.html & Demo.css to see how the components are created.
You can provide your custom css class for tags as well for the input.
There are actually 2 components, one to just render the tags, and one to accept input. They can be run independently too.
There is a default model implementation TagCollection. You can ditch that and provide your implementation, just stick to the necessary interfaces. This model is very simple, it would be ideal to provide an immutable one.

Sample Code