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:

import { Typeahead } from 'react-typeahead';

React.render(
  <Typeahead
    options={['John', 'Paul', 'George', 'Ringo']}
    maxVisible={2}
  />
);

For a tokenizer typeahead input:

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!