Usage.md

Basic Usage

The typeahead behaves similarly to other form elements. It requires an array of data options to be filtered and displayed.

<Typeahead
  onChange={(selected) => {
    // Handle selections...
  }}
  options={[ /* Array of objects or strings */ ]}
/>

Single & Multi-Selection

The component provides single-selection by default, but also supports multi-selection. Simply set the multiple prop and the component turns into a tokenizer:

<Typeahead
  multiple
  onChange={(selected) => {
    // Handle selections...
  }}
  options={[...]}
/>

Controlled vs. Uncontrolled

Similar to other form elements, the typeahead can be controlled or uncontrolled. Use the selected prop to control it via the parent, or defaultSelected to optionally set defaults and then allow the component to control itself. Note that the selections can be controlled, not the input value.

Controlled (Recommended)

<Typeahead
  onChange={(selected) => {
    this.setState({selected});
  }}
  options={[...]}
  selected={this.state.selected}
/>

Uncontrolled

<Typeahead
  defaultSelected={[...]}
  onChange={(selected) => {
    // Handle selections...
  }}
  options={[...]}
/>

Next: Data