{"id":16745124,"url":"https://github.com/royalbhati/react-usedebounce","last_synced_at":"2025-04-05T06:26:47.085Z","repository":{"id":39354475,"uuid":"214657691","full_name":"royalbhati/react-useDebounce","owner":"royalbhati","description":"useDebounce React","archived":false,"fork":false,"pushed_at":"2022-12-11T09:20:57.000Z","size":590,"stargazers_count":1,"open_issues_count":19,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-10T14:14:44.987Z","etag":null,"topics":["debounce","debounce-input","raectjs","react-hooks","usedebounce"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/royalbhati.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-12T14:07:19.000Z","updated_at":"2020-08-05T07:40:50.000Z","dependencies_parsed_at":"2022-09-15T04:40:42.948Z","dependency_job_id":null,"html_url":"https://github.com/royalbhati/react-useDebounce","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royalbhati%2Freact-useDebounce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royalbhati%2Freact-useDebounce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royalbhati%2Freact-useDebounce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royalbhati%2Freact-useDebounce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/royalbhati","download_url":"https://codeload.github.com/royalbhati/react-useDebounce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247297954,"owners_count":20915938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debounce","debounce-input","raectjs","react-hooks","usedebounce"],"created_at":"2024-10-13T01:44:39.682Z","updated_at":"2025-04-05T06:26:46.903Z","avatar_url":"https://github.com/royalbhati.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useDebounce\n\n## Demo\n\nCheck out the [Codepen example](//).\n\n## Basic Usage as a Hook\n\n```js\nimport React, { useState, useEffect } from \"react\";\nimport useDebounce from \"./useDebounce\";\n\n\n\nexport default function DebounceInput(props) {\n  const [value, setValue] = useState(\"\");\n  const [response, setResponse] = useState(\"\");\n  const ServerRequest =()=\u003e{\n    //API logic\n}\n\n  const handleChange = e =\u003e {\n    setValue(e.target.value);\n  };\n\n\n  const datafromServer = useDebounce(\n   ServerRequest\n   500,\n\n  );\n\n  useEffect(() =\u003e {\n    datafromServer(value).then(data=\u003e{\n        setResponse(data)\n    })\n  }, [value]);\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput value={value} onChange={handleChange}\u003e\u003c/input\u003e\n    \u003c/div\u003e\n  );\n}\n\n}\n```\n\n## Usage as a Component\n\n```js\nimport React, { useState, useEffect } from \"react\";\nimport DebounceInput from \"./DebounceInput\";\n\nconst demoServer = val =\u003e {\n  //API request\n};\n\nconst App = () =\u003e {\n  const [serverData, setServerData] = useState(\"\");\n  const handleResponse = val =\u003e {\n    val.then(res =\u003e {\n      setServerData(res);\n    });\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cDebounceInput\n        getResponse={handleResponse}\n        toDebounce={demoServer}\n        delay={500}\n        DontfireOnBackspace={true}\n      \u003e\u003c/DebounceInput\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## Usage with React AutoSuggest\n\n```js\nfunction ReactAutoSuggestExample() {\n  const [suggestions, setSuggestionsList] = useState([]);\n\n  const handleInputBox = (event, { newValue }) =\u003e {\n    setInputBox(newValue);\n  };\n\n  const inputProps = {\n    placeholder: \"Search by name\",\n    value: inputBox,\n    onChange: handleInputBox\n  };\n\n  const onSuggestionsFetchRequested = async ({ value }) =\u003e {\n    const res = await axios.post(API.getByName, { name: value });\n    setSuggestionsList(res.data.data);\n  };\n\n  const onSuggestionsClearRequested = () =\u003e {\n    setSuggestionsList([]);\n  };\n  const getSuggestionValue = suggestion =\u003e {\n    setFilteredData(suggestion);\n  };\n  const renderSuggestion = suggestion =\u003e {\n    return \u003cdiv\u003e{suggestion.name}\u003c/div\u003e;\n  };\n  const OnFetch = useDebounce(onSuggestionsFetchRequested, 500);\n  return (\n    \u003cAutosuggest\n      suggestions={suggestions}\n      onSuggestionsFetchRequested={OnFetch}\n      onSuggestionsClearRequested={onSuggestionsClearRequested}\n      getSuggestionValue={getSuggestionValue}\n      renderSuggestion={renderSuggestion}\n      inputProps={inputProps}\n    /\u003e\n  );\n}\n```\n\n## Props\n\n| Prop                                          | Type     |    Required     | Description                                        |\n| :-------------------------------------------- | :------- | :-------------: | :------------------------------------------------- |\n| [`toDebounce`](#toDebounce)                   | Func     |        ✓        | Function That will be Debounced                    |\n| [`delay`](#delay)                             | Number   |        ✓        | Number of milliseconds to debounce.                |\n| [`getResponse`](#getResponse)                 | Function |        ✓        | Function to get the response from the component    |\n| [`promise`](#promise)                         | Boolean  | default : true  | If you need to return a promise or a simple return |\n| [`DontfireOnBackspace`](#DontfireOnBackspace) | Boolean  | default : false | Wether to stop firing API when pressing backspace  |\n\n## License\n\n[MIT](http://moroshko.mit-license.org)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalbhati%2Freact-usedebounce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froyalbhati%2Freact-usedebounce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalbhati%2Freact-usedebounce/lists"}