Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nkbt/react-debounce-input
React component that renders Input with debounced onChange
https://github.com/nkbt/react-debounce-input
Last synced: about 21 hours ago
JSON representation
React component that renders Input with debounced onChange
- Host: GitHub
- URL: https://github.com/nkbt/react-debounce-input
- Owner: nkbt
- License: mit
- Created: 2015-09-03T01:44:32.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-09-20T19:09:20.000Z (about 2 years ago)
- Last Synced: 2024-05-22T03:03:26.063Z (7 months ago)
- Language: JavaScript
- Size: 66.8 MB
- Stars: 448
- Watchers: 10
- Forks: 63
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-debounce-input [](https://www.npmjs.com/package/react-debounce-input)
[](https://circleci.com/gh/nkbt/react-debounce-input)
[](https://david-dm.org/nkbt/react-debounce-input)
[](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 `` or ``
## 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
(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 (
this.setState({value: event.target.value})} />
Value: {this.state.value}
);
}
}
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(, appRoot);
```
## Options
### `element` : PropTypes.string or React.PropTypes.func (default: "input")
You can specify element="textarea". For Example:
```js
```
Will result in
```js
```
Note: when rendering a `` 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 `` and `` 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
```
Will result in
```js
```
### `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 ``
```js
this.setState({value: event.target.value})}
placeholder="Name"
className="user-name" />
```
Will result in
```js
```
## 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 ``. 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 [email protected]: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