1.0.0 • Published 6 years ago
@prawn-cake/react-input-debouncer v1.0.0
react-input-debouncer
Why ?
Are you familiar with a problem of poor performance when filtering list of items using by the input text?
A typical solution is to debounce an input change for some milliseconds. And many libraries exist to solve it, including famous lodash debounce.
Few issues with them:
- Many of those libraries are wrappers around lodash.
- Libraries provide wrapper input components which is totally redundant
This library just provides react specific debounce
function to use it with regular html input.
Install
npm install --save @prawn-cake/react-input-debouncer
# OR
yarn add @prawn-cake/react-input-debouncer
Usage
Here I use useState
hook, one of latest and greatest react hooks features.
import { useState } from 'react'
import debounce from 'react-input-debouncer'
function MyComponent({ props }) {
[value, setValue] = useState('');
return (
<React.Fragment>
...
<label>{value}</label>
<input
type="text"
onChange={debounce(e => setValue(e.target.value), 100)}
/>
</React.Fragment>
)
}
MyComponent
renders a fragment with a label and a text input elements.
Text input is debounced for 100ms.
1.0.0
6 years ago