paper-input-autosuggest

A paper input for React with autosuggest support.

Usage

@import '@scienceai/paper-input-autosuggest';

import PaperInputAutosuggest from '@scienceai/paper-input-autosuggest';

<PaperInputAutosuggest
  label="Username or email"
  name="person"
  suggestions={this.state.suggestions}
  renderSuggestion={this.renderSuggestion}
  onChange={this.handleChange}
  onSelectSuggestion={this.handleSelect}
  value={this.state.person}
/>

Properties

There is only one component — PaperInputAutosuggest — and it takes the following properties:

• value, any. This is meant to be a controlled component, so a value needs be provided to it.
• suggestions, array of any. The list of suggestions that are on offer. These can be anything.
• renderSuggestion, func. This function gets called with each suggestion and must return a JSX/React friendly rendering of it. By default it returns the suggestion wrapped in a span.
• onChange, func. Is called when the value changes from typing in the input, receives the value.
• onSelectSuggestion, func. Is called with the suggestion value when a given suggestion is selected. Note that this may be different from its text value.
• onBlurCapture, func. Signals the control being blurred.
• onKeyDown, func. Will signal that an Enter key has been hit without an active selection (ie. this is likely an attempt to submit).
• getSuggestionValue: func. Maps a suggestion to a React key attribute. Defaults to just providing the suggestion.

Extra props are passed on to paper-input (note that it requires some props, such as label and name).