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

Coming soon

Demo

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

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

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