# react-debounce-input

> React component that renders Input with debounced onChange

Latest version **3.3.0** (published 2022-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-debounce-input
pnpm add react-debounce-input
yarn add react-debounce-input
bun add react-debounce-input
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.0 |
| Published | 2022-06-06 |
| First published | 2015-09-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 63.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 450 |
| Author | Nik Butenko |
| Maintainers | nkbt |
| Keywords | component, react-component, react, input, debounce, throttle |

## Links

- npm: https://www.npmjs.com/package/react-debounce-input
- Repository: https://github.com/nkbt/react-debounce-input
- Issues: https://github.com/nkbt/react-debounce-input/issues
- npm.io page: https://npm.io/package/react-debounce-input

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.3.0 (latest) — 2022-06-06
- 3.2.5 — 2021-08-17
- 3.2.4 — 2021-07-20
- 3.2.3 — 2020-10-30
- 3.2.2 — 2019-10-17
- 3.2.1 — 2019-10-17
- 3.2.0 — 2018-02-04
- 3.1.0 — 2017-09-30
- 3.0.1 — 2017-08-03
- 3.0.0 — 2017-04-26
- 2.4.2 — 2016-11-18
- 2.4.1 — 2016-11-07
- 2.4.0 — 2016-06-09
- 2.3.2 — 2016-05-24
- 2.3.1 — 2016-05-23
- … 15 more at https://npm.io/package/react-debounce-input/versions

## README

# react-debounce-input [![npm](https://img.shields.io/npm/v/react-debounce-input.svg?style=flat-square)](https://www.npmjs.com/package/react-debounce-input)

[![CircleCI](https://img.shields.io/circleci/project/nkbt/react-debounce-input.svg?style=flat-square&label=build)](https://circleci.com/gh/nkbt/react-debounce-input)
[![Dependencies](https://img.shields.io/david/nkbt/react-debounce-input.svg?style=flat-square)](https://david-dm.org/nkbt/react-debounce-input)
[![Dev Dependencies](https://img.shields.io/david/dev/nkbt/react-debounce-input.svg?style=flat-square)](https://david-dm.org/nkbt/react-debounce-input#info=devDependencies)

React component that renders an Input, Textarea or other element with debounced onChange. Can be used as drop-in replacement for `<input type="text" />` or `<textarea />`

![React Debounce Input](./example/react-debounce-input.gif)

## Live design system demo

[https://www.jinno.io/app/19](https://www.jinno.io/app/19/?source=react-debounce-input)

## Simple web demo

[http://nkbt.github.io/react-debounce-input](http://nkbt.github.io/react-debounce-input)

## Codepen demo

[http://codepen.io/nkbt/pen/VvmzLQ](http://codepen.io/nkbt/pen/VvmzLQ?editors=0010)

## Installation

### NPM

```sh
npm install --save react-debounce-input
```

### yarn

```sh
yarn add react-debounce-input 
```

### 1998 Script Tag:
```html
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-debounce-input/build/react-debounce-input.js"></script>
(Module exposed as `DebounceInput`)
```

## Usage
```js
import React from 'react';
import ReactDOM from 'react-dom';
import {DebounceInput} from 'react-debounce-input';

class App extends React.Component {
  state = {
    value: ''
  };

  render() {
    return (
      <div>
        <DebounceInput
          minLength={2}
          debounceTimeout={300}
          onChange={event => this.setState({value: event.target.value})} />

        <p>Value: {this.state.value}</p>
      </div>
    );
  }
}

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);
```

## Options

### `element` : PropTypes.string or React.PropTypes.func (default: "input")

You can specify element="textarea". For Example:

```js
<DebounceInput element="textarea" />
```

Will result in

```js
<textarea />
```

Note: when rendering a `<textarea />` you may wish to set `forceNotifyByEnter = {false}` so the user can make new lines without forcing notification of the current value.

This package has only been tested with `<input />` and `<textarea />` but should work with any element which has `value` and `onChange` props.

You can also use a custom react component as the element. For Example:

```js
<DebounceInput element={CustomReactComponent} />
```

Will result in

```js
<CustomReactComponent />
```

### `onChange`: PropTypes.func.isRequired

Function called when value is changed (debounced) with original event passed through


### `value`: PropTypes.string

Value of the Input box. Can be omitted, so component works as usual non-controlled input.


### `minLength`: PropTypes.number (default: 0)

Minimal length of text to start notify, if value becomes shorter then `minLength` (after removing some characters), there will be a notification with empty value `''`.


### `debounceTimeout`: PropTypes.number (default: 100)

Notification debounce timeout in ms. If set to `-1`, disables automatic notification completely. Notification will only happen by pressing `Enter` then.


### `forceNotifyByEnter`: PropTypes.bool (default: true)

Notification of current value will be sent immediately by hitting `Enter` key. Enabled by-default. Notification value follows the same rule as with debounced notification, so if Length is less, then `minLength` - empty value `''` will be sent back.

*NOTE* if `onKeyDown` callback prop was present, it will be still invoked transparently.

### `forceNotifyOnBlur`: PropTypes.bool (default: true)

Same as `forceNotifyByEnter`, but notification will be sent when focus leaves the input field.

### `inputRef`: PropTypes.func (default: undefined)

Will pass `ref={inputRef}` to generated input element. We needed to rename `ref` to `inputRef` since `ref` is a special prop in React and cannot be passed to children. 

See [./example/Ref.js](./example/Ref.js) for usage example.

### Arbitrary props will be transferred to rendered `<input>`

```js
<DebounceInput
  type="number"
  onChange={event => this.setState({value: event.target.value})}
  placeholder="Name"
  className="user-name" />
```

Will result in

```js
<input
  type="number"
  placeholder="Name"
  className="user-name" />
```

## Typescript

This library has typescript typings, import them the same way as in javascript:

```typescript
import {DebounceInput} from 'react-debounce-input';
```

Also there are helper types `DebounceTextArea` and `Debounced` to provide strict interfaces for wrapping components different from standard `<input />`. Check usage examples in `example/typescript-example.tsx`.


*NOTE* library author is not using Typescript, so if you are using typings and found an issue, please submit a PR with fix. Thanks @iyegoroff for the initial TS support!


## Development and testing

Currently is being developed and tested with the latest stable `Node` on `OSX`.

To run example covering all `DebounceInput` features, use `yarn start`, which will compile `example/Example.js`

```bash
git clone git@github.com:nkbt/react-debounce-input.git
cd react-debounce-input
yarn install
yarn start

# then
open http://localhost:8080
```

## Tests

```bash
# to run ESLint check
yarn lint

# to run tests
yarn test
```

## License

MIT

---
_Source: https://npm.io/package/react-debounce-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._