react-input-box-done-typing

A React component that triggers a callback when the user has finished typing in the input text box

Usage

Install via npm using the following npm command:

npm i -S react-input-box-done-typing

Include the component within your React application:

import InputBoxDoneTyping from 'react-input-box-done-typing';

And use it inside your container:

<InputBoxDoneTyping
  id="input-box-done-typing"
  className="form-control"
  placeholder="Start typing ..."
  maxLength={20}
  defaultValue="lon"
  autoComplete="on"
  onChange={(value) => { console.log('onChange:', value); } }
  doneTyping={(value) => { console.log('doneTyping:', value); } }
  doneTypingInterval={2000}
  />

Attributes

Name | Type | Required | Default | Options --- | --- | --- | --- | --- id | string | no | - | - className | string | no | - | - placeholder | string | no | - | - maxLength | number | no | - | - defaultValue | string | no | - | - autoComplete | string | no | on | ['on', 'off'] onChange | function | no | - | - doneTyping | function | yes | - | - doneTypingInterval | number | no | 500 (milliseconds) | -

Demo

Clone or download this GitHub repository then run a live demo using the following npm commands:

npm i
npm run demo

The script will automatically open a tab of your default browser; you will be able to see the InputBoxDoneTyping component in action