Package Exports

react-debounce-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-debounce-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-debounce-input

React component that renders Input with debounced onChange

React Debounce Input

Installation

npm

npm install --save react-debounce-input

bower

bower install --save react-debounce-input

Demo

http://nkbt.github.io/react-debounce-input/example

Codepen demo

http://codepen.io/nkbt/pen/VvmzLQ

Usage

import React from 'react';
import DebounceInput from 'react-debounce-input';

const App = React.createClass({
  getInitialState() {
    return {
      value: ''
    };
  },

  render() {
    return (
      <div>
        <DebounceInput
          minLength={2}
          debounceTimeout={300}
          onChange={value => this.setState({value})} />
        
        <p>Value: {this.state.value}</p>
      </div>
    );
  }
});


React.render(<App />, document.body);

Options

`onChange`: PropTypes.func.isRequired

Function called when value is changed (debounced)

`value`: PropTypes.string (default: '')

Initial value

`minLength`: PropTypes.number (default: 2)

Minimal length of text to start notify, if value becomes shorter then minLength (after removing some characters), there will be a notification with empty value ''.

`debounceTimeout`: PropTypes.number (default: 100)

Notification debounce timeout in ms. If set to -1, disables automatic notification completely. Notification will only happen by pressing Enter then.

`forceNotifyByEnter`: PropTypes.bool (default: true)

Notification of current value will be sent immediately by hitting Enter key. Enabled by-default. Notification value follows the same rule as with debounced notification, so if Length is less, then minLength - empty value '' will be sent back.

NOTE if onKeyDown callback prop was present, it will be still invoked transparently.

Arbitrary props will be transferred to rendered `<input>`

<DebounceInput
  onChange={value => this.setState({value})}
  placeholder="Name"
  className="user-name" />
});

Will result in

<input type="text"
  placeholder="Name"
  className="user-name" />
});

Development and testing

npm install
npm start

Then

open http://localhost:8080

License

MIT