JavaScript
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 11 commits ahead, 6 commits behind juliancwirko:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
scripts
src
.babelrc
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
index.js
package.json

README.md

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 triggered events - ie. network requests.

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