React Tokenizer
A React.js component that parses user input and displays them as individual tokens.
Example use cases include:
- Entering a list of email addresses
- Tagging
Installation
npm install react-tokenizer
This library is written with CommonJS modules. You'll need to be using Browserify or Webpack to consume it like any other modules from npm.
To run the example
Run npm install
followed by gulp webserver
. Open your browser and visit
http://localhost:8080
.
Tests
To run the tests npm test
.
How does it work?
var App = React;
The <Tokenizer />
component takes in 3 propTypes i.e. tokens
, tokenize
and removeToken
.
tokens
is basically an array of strings which will be rendered as individual
cells with a [x] that removes itself upon clicking.
tokenize
is the function that is called whenever one of the key seperators is
pressed while the input has focus.
For now, the seperators are Tab, Comma and Enter.
removeToken
will be fired whenever the input has focus, but there is no value
in it. The text content of the very last token will be sent as arguments.
Paste Events
Right now, if user input is pasted in, the Tokenizer simply splits them by
newlines and sends an array of strings to tokenize
.
TODO
- Cross browser compatibility
- Custom seperator keys
- Easier way to style the elements