Skip to content
master
Switch branches/tags
Code
This branch is 11 commits ahead, 6 commits behind juliancwirko:master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

React Deferred Input

Resources

License

Releases

No releases published

Packages

No packages published