react-input-completion
v1.0.2
Published
A cross-browser autocomplete component for React
Downloads
9
Maintainers
Readme
react-input-completion
A cross-browser autocomplete component for React.
<InputCompletion>
defaults to the native HTML5 <datalist>
(unless you prefer it didn't) and polyfills any unsupported browsers, with no external dependencies.
Usage
<InputCompletion>
wraps an input, and connects it to a list of options
.
Installation
npm install --save react-input-completion
Example
// in your component's render function
var browsers = ['Chrome', 'Firefox', 'IE', 'Safari'];
var onChange = this.onChange.bind(this);
<InputCompletion options={browsers} name="browsers" onValueChange={onChange}>
<input placeholder="Enter your browser name" />
</InputCompletion>
Props
onValueChange
- Callback function for when input value changes. Arguments: DOMEvent, value.
options
- Array of suggestions to present to the user. They can be updated at any time.
name
- Unique identifier for the list
useNative
- Boolean (optional) to use native HTML5 <datalist>
if possible. Default: true
.
Styles
Default styles (for fallback to match native ) are available in react-input-completion.css.
Development
Installation
npm i
- Installs dependencies
Developing
npm start
- Compiles code, starts web server and demo page at localhost:3000.
Testing
npm run test
- Runs tests, and re-runs on file changes.
Deployment
npm publish
- Compiles code and publishes to npm.