use-debounce-react
Version:
A react hook which is wait until something is happening then execute provided callback
106 lines (71 loc) • 2.17 kB
Markdown
# useDebounce (A ReactJS Hook)
## This is a react-JS hook.
It is basically useful to add **debounce/delay** until some task is happening, once the task will be done then provided **callback** will be executed.
### Debounced provided callback function for particular interval
```js
import { useDebounce } from "use-debounce-rv/dist";
const { Debounce } = useDebounce();
Debounce(() => {}, 1000);
```
# Installation
```js
npm i use-debounce-rv
```
or
```js
npm i --legacy-peer-deps use-debounce-rv
```
## Usage example
### Import Hook
import { useDebounce } from 'use-debounce-rv/dist';
### Define Hook
const { Debounce } = useDebounce();
### Usage
> Debounce(callback, interval)
- **callback**: _A function to execute after particular interval._
- **interval**: _Time in milli seconds._
Debounce(() => {}, 1000);
## Example -01 (Execute a callback after typing finished)
```js
import { useDebounce } from "use-debounce-rv/dist";
export const SamplePage = () => {
const [data, setData] = useState();
const { Debounce } = useDebounce();
const handleChange = (e) => {
setData(e.target.value);
//Debounce(callback, interval)
//Debounce(() => {}, 1000);
Debounce(() => {
console.log("side effect after typing finshed");
}, 1500);
};
return (
<div>
<label>Search Data</label>
<input type="text" value={data} onChange={handleChange} />
</div>
);
};
```
> In above example Debounce will execute the console.log once user ends typing.
## Example - 02 (Add delay in function execution)
```js
import { useDebounce } from "use-debounce-rv/dist";
export const SamplePage = () => {
const { Debounce } = useDebounce();
const handleClick = (e) => {
//Debounce(callback, interval)
//Debounce(() => {}, 1000);
Debounce(() => {
console.log("I am executed after 2 second");
}, 2000);
};
return (
<div>
<label>Click The Button </label>
<button onChange={handleClick}>Hey! Click Me</button>
</div>
);
};
```
> In above example Debounce will execute the console.log after 2 second.