React Deferred Input

npm install react-deferred-input

See demo HERE.

What is the purpose of this component?

Form inputs in React can either be controller or uncontrolled (see here). Controlled components always display the value prop they are passed and need to trigger the onChange handler every time a character is added or removed so that they can be updated. Uncontrolled components render the initial defaultValue prop they get passed and after that they render what the user types into them.

This component gives you the functionality of a controlled component that always displays the value prop that it is given EXCEPT when a user is focused on the input then it waits till the user blurs and then only triggers the onChange (and onBlur) handlers if the value has change.

This can dramatically reduce the number of network requests that get sent.

Example Usage

import React, { Component } from 'react';
import DeferredInput from 'react-deferred-input';

class MyComponent extends Component {
  render() {
    return (
      <DeferredInput value='initial value' onChange={this.handleChange} />
    );
  }

  handleChange(value) {
    console.log("this is only called when the input is blurred with the value: ", value);
  }
}

Options/Available props

| Prop Name | Description | Default Value | |----------------|-------------------------------------------------------------------|---------------------| | value | input value | String: '' | | onChange | handler called with one argument (input value) on blur (required) | Function: undefined | | onBlur | handler called with one argument (input value) on blur | Function: undefined | | blurOnEnter | should input blur when press ENTER key | Boolean: false | | focusOnMount | should input be focused when initially mounted | Boolean: false | | clearOnChange | should input value be cleared on blur | Boolean: false | | inputComponent | component to be used for actual input | 'input' |

Any other custom props will be passed on to input component.

License

MIT