A small lightweight React input component with debouncing that can be used in place of normal <input /> or <textarea /> fields.The component renders input with debouncing onChange event.

npm install --save react-input-with-debouncing

import React, { Component } from 'react'

import InputWithDebouncing from 'react-input-with-debouncing'
import 'react-input-with-debouncing/dist/index.css' //import of index.css is totally optional.

class ExampleInputWithDebouncing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '';
    }
  }

  render() {
    return (
      <InputWithDebouncing
        type="text"
        placeholder='Search'
        className='input-search'
        minLength={1}
        debounceTimeout={1000}
        onChange={(e) => this.setState({ value: e.target.value })}
        value={this.state.value}
      />
    )
  }
}

<InputWithDebouncing
  element= 'input',
  type= 'text',
  onKeyDown= {undefined},
  onBlur= {undefined},
  value= {undefined},
  minLength= {0},
  debounceTimeout= {500},
  notifyOnEnter= {true},
  notifyOnBlur= {true},
  inputRef= {undefined}
 />

element prop can take either one of the value from input or textarea.

Default value of type prop is text but you can specify other options like number.

onChange function is called with event passed through it on input change with debounced timeout.

Default value of input is undefined. If not specified, then input works as non-controlled input.

minLength prop specifies minimal length of text to start notify, if value becomes lesser then minLength (after removing some characters), there will be a notification with empty value ''.

debounceTimeout specifies the debouncing time in ms. If you specify debounceTimeout = -1, then it disable automatic notifications completely. On pressing of Enter, notification will be triggered only in this case.

On pressing Enter, notification of current value will be triggered immediately. Notification value follows the same rule as with debounced notification, so if length is less, then minLength - empty value '' will be sent back.

In this case, notification will be sent only when focus leaves the input field.

Pass ref={inputRef} to generated input element. ref is a special prop in React, and hence renamed ref to inputRef.

This is an arbitrary prop which is directly applied to input field.

This is an arbitrary prop which is directly applied to input field.

npm run test

npm run test:unit

npm run test:lint

npm run test:watch

MIT © Satyendra Pandit