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 aspan
. -
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 anEnter
key has been hit without an active selection (ie. this is likely an attempt to submit). -
getSuggestionValue
: func. Maps a suggestion to a Reactkey
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
).