https://github.com/royalbhati/react-usedebounce
useDebounce React
https://github.com/royalbhati/react-usedebounce
debounce debounce-input raectjs react-hooks usedebounce
Last synced: about 1 year ago
JSON representation
useDebounce React
- Host: GitHub
- URL: https://github.com/royalbhati/react-usedebounce
- Owner: royalbhati
- Created: 2019-10-12T14:07:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T09:20:57.000Z (over 3 years ago)
- Last Synced: 2025-02-10T14:14:44.987Z (over 1 year ago)
- Topics: debounce, debounce-input, raectjs, react-hooks, usedebounce
- Language: JavaScript
- Homepage:
- Size: 576 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# useDebounce
## Demo
Check out the [Codepen example](//).
## Basic Usage as a Hook
```js
import React, { useState, useEffect } from "react";
import useDebounce from "./useDebounce";
export default function DebounceInput(props) {
const [value, setValue] = useState("");
const [response, setResponse] = useState("");
const ServerRequest =()=>{
//API logic
}
const handleChange = e => {
setValue(e.target.value);
};
const datafromServer = useDebounce(
ServerRequest
500,
);
useEffect(() => {
datafromServer(value).then(data=>{
setResponse(data)
})
}, [value]);
return (
);
}
}
```
## Usage as a Component
```js
import React, { useState, useEffect } from "react";
import DebounceInput from "./DebounceInput";
const demoServer = val => {
//API request
};
const App = () => {
const [serverData, setServerData] = useState("");
const handleResponse = val => {
val.then(res => {
setServerData(res);
});
};
return (
);
};
export default App;
```
## Usage with React AutoSuggest
```js
function ReactAutoSuggestExample() {
const [suggestions, setSuggestionsList] = useState([]);
const handleInputBox = (event, { newValue }) => {
setInputBox(newValue);
};
const inputProps = {
placeholder: "Search by name",
value: inputBox,
onChange: handleInputBox
};
const onSuggestionsFetchRequested = async ({ value }) => {
const res = await axios.post(API.getByName, { name: value });
setSuggestionsList(res.data.data);
};
const onSuggestionsClearRequested = () => {
setSuggestionsList([]);
};
const getSuggestionValue = suggestion => {
setFilteredData(suggestion);
};
const renderSuggestion = suggestion => {
return
{suggestion.name};
};
const OnFetch = useDebounce(onSuggestionsFetchRequested, 500);
return (
);
}
```
## Props
| Prop | Type | Required | Description |
| :-------------------------------------------- | :------- | :-------------: | :------------------------------------------------- |
| [`toDebounce`](#toDebounce) | Func | ✓ | Function That will be Debounced |
| [`delay`](#delay) | Number | ✓ | Number of milliseconds to debounce. |
| [`getResponse`](#getResponse) | Function | ✓ | Function to get the response from the component |
| [`promise`](#promise) | Boolean | default : true | If you need to return a promise or a simple return |
| [`DontfireOnBackspace`](#DontfireOnBackspace) | Boolean | default : false | Wether to stop firing API when pressing backspace |
## License
[MIT](http://moroshko.mit-license.org)