react-typeahead-tokenizer

# react-typeahead-tokenizer [![Build Status](https://travis-ci.org/lemonJS/react-typeahead-tokenizer.svg)](https://travis-ci.org/lemonJS/react-typeahead-tokenizer) **This was originally a fork of https://github.com/fmoo/react-typeahead** react-typeahead-tokenizer is a javascript library that provides a react-based typeahead, or autocomplete text entry, as well as a "typeahead tokenizer", a typeahead that allows you to select multiple results. ## Usage For a typeahead input: ```javascript import { Typeahead } from 'react-typeahead'; React.render( <Typeahead options={['John', 'Paul', 'George', 'Ringo']} maxVisible={2} /> ); ``` For a tokenizer typeahead input: ```javascript import { Tokenizer } from 'react-typeahead'; React.render( <Tokenizer options={['John', 'Paul', 'George', 'Ringo']} onTokenAdd={token => console.log('token added: ', token)} /> ); ``` ## API ### Typeahead(props) Type: React Component Basic typeahead input and results list. #### props.options Type: `Array` Default: [] An array supplied to the filtering function. #### props.defaultValue Type: `String` A default value used when the component has no value. If it matches any options a option list will show. #### props.value Type: `String` Specify a value for the text input. #### props.maxVisible Type: `Number` Limit the number of options rendered in the results list. #### props.resultsTruncatedMessage Type: `String` If `maxVisible` is set, display this custom message at the bottom of the list of results when the result are truncated. #### props.customClasses Type: `Object` Allowed Keys: `input`, `results`, `listItem`, `listAnchor`, `hover`, `typeahead`, `resultsTruncated` An object containing custom class names for child elements. Useful for integrating with 3rd party UI kits. #### props.placeholder Type: `String` Placeholder text for the typeahead input. #### props.disabled Type: `Boolean` Set to `true` to add disable attribute in the `<input>` element #### props.inputProps Type: `Object` Props to pass directly to the `<input>` element. #### props.onKeyDown Type: `Function` Event handler for the `keyDown` event on the typeahead input. #### props.onKeyPress Type: `Function` Event handler for the `keyPress` event on the typeahead input. #### props.onKeyUp Type: `Function` Event handler for the `keyUp` event on the typeahead input. #### props.onBlur Type: `Function` Event handler for the `blur` event on the typeahead input. #### props.onFocus Type: `Function` Event handler for the `focus` event on the typeahead input. #### props.onOptionSelected Type: `Function` Event handler triggered whenever a user picks an option. #### props.defaultClassNames Type: `boolean` Default: true If false, the default classNames are removed from the typeahead. #### props.showOptionsWhenEmpty Type: `boolean` Default: false If true, options will still be rendered when there is no value. #### props.allowCustomValues Type: `number` If 1, custom tags can be added without a matching typeahead selection --- ### Tokenizer(props) Type: React Component Typeahead component that allows for multiple options to be selected. #### props.options Type: `Array` Default: [] An array supplied to the filter function. #### props.maxVisible Type: `Number` Limit the number of options rendered in the results list. #### props.resultsTruncatedMessage Type: `String` If `maxVisible` is set, display this custom message at the bottom of the list of results when the result are truncated. #### props.name Type: `String` The name for HTML forms to be used for submitting the tokens' values array. #### props.customClasses Type: `Object` Allowed Keys: `input`, `results`, `listItem`, `listAnchor`, `hover`, `typeahead`, `resultsTruncated` An object containing custom class names for child elements. Useful for integrating with 3rd party UI kits. #### props.placeholder Type: `String` Placeholder text for the typeahead input. #### props.disabled Type: `Boolean` Set to `true` to add disable attribute in the `<input>` element #### props.inputProps Type: `Object` Props to pass directly to the `<input>` element. #### props.onKeyDown Type: `Function` Event handler for the `keyDown` event on the typeahead input. #### props.onKeyPress Type: `Function` Event handler for the `keyPress` event on the typeahead input. #### props.onKeyUp Type: `Function` Event handler for the `keyUp` event on the typeahead input. #### props.onBlur Type: `Function` Event handler for the `blur` event on the typeahead input. #### props.onFocus Type: `Function` Event handler for the `focus` event on the typeahead input. #### props.defaultSelected Type: `Array` A set of values of tokens to be loaded on first render. #### props.onTokenRemove Type: `Function` Params: `(removedToken)` Event handler triggered whenever a token is removed. #### props.onTokenAdd Type: `Function` Params: `(addedToken)` Event handler triggered whenever a token is removed. #### props.defaultClassNames Type: `boolean` Default: true If false, the default classNames are removed from the tokenizer and the typeahead. ## Developing ### Setting Up First you'll need NPM, then clone the repository. Once that's done, to get started, run `npm install` in your checkout directory. Use `npm run build` to generate the dist file. Use `npm test` to run the tests. ### Contributing Fork the repository and send a pull request!