react-input-completion

1.0.2 • Public • Published

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.

Build Status

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

  1. npm i - Installs dependencies

Developing

  1. npm start - Compiles code, starts web server and demo page at localhost:3000.

Testing

  1. npm run test - Runs tests, and re-runs on file changes.

Deployment

  1. npm publish - Compiles code and publishes to npm.

Package Sidebar

Install

npm i react-input-completion

Weekly Downloads

1

Version

1.0.2

License

ISC

Last publish

Collaborators

  • ianmcnally