paper-input-autosuggest

1.0.2 • Public • Published

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).

Dependents (2)

Package Sidebar

Install

npm i paper-input-autosuggest

Weekly Downloads

4

Version

1.0.2

License

Apache-2.0

Last publish

Collaborators

  • scienceai