React Deferred Input Demo

React input component that defers onChange handler until input is blurred

View the Project on GitHubfinnfiddle/react-deferred-input

Basic Example

<DeferredInput
  value='initial value'
  onChange={value => alert(value)}
  focusOnMount={true}
/>

Blur On Enter

<DeferredInput
  value='initial value'
  onChange={value => alert(value)}
  blurOnEnter={true}
/>

Clear On Change

<DeferredInput
  value='initial value'
  onChange={value => alert(value)}
  clearOnChange={true}
/>

Custom Input Component

<DeferredInput
  value='initial value'
  onChange={value => alert(value)}
  inputComponent='textarea'
/>
class CustomInput extends React.Component {
  render() {
    return (
      <input
        style={{ borderColor: 'cyan' }}
        {...this.props}
      />
    );
  }
}

<DeferredInput
  value='initial value'
  onChange={value => alert(value)}
  inputComponent={CustomInput}
/>