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
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.
Run npm install
followed by gulp webserver
. Open your browser and visit
http://localhost:8080
.
To run the tests npm test
.
var App = React.createClass({
getInitialState: function() {
return { tokens: [] };
},
render: function() {
return (
<section className="app">
<Tokenizer
tokens={this.state.tokens}
tokenize={this._tokenize}
removeToken={this._removeToken} />
</section>
);
},
_tokenize: function(data) {
// Logic to tokenize user input
},
_removeToken: function(token) {
// Logic to remove a token
}
});
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.
Right now, if user input is pasted in, the Tokenizer simply splits them by
newlines and sends an array of strings to tokenize
.
- Cross browser compatibility
- Custom seperator keys
- Easier way to style the elements