{"id":16363792,"url":"https://github.com/noahflk/react-relaxed","last_synced_at":"2025-03-16T15:32:43.128Z","repository":{"id":47135649,"uuid":"358226229","full_name":"noahflk/react-relaxed","owner":"noahflk","description":"Lightweight React Hooks for debouncing and throttling inputs","archived":false,"fork":false,"pushed_at":"2024-10-14T00:32:49.000Z","size":1731,"stargazers_count":11,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-18T11:03:09.868Z","etag":null,"topics":["debounce","hooks","react","react-hook","react-hooks","throttle"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-relaxed","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/noahflk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-15T10:58:06.000Z","updated_at":"2024-05-29T17:19:58.000Z","dependencies_parsed_at":"2023-09-25T02:21:50.101Z","dependency_job_id":"d6b1afb5-8f2d-4f9c-a346-e670ee4c7621","html_url":"https://github.com/noahflk/react-relaxed","commit_stats":{"total_commits":13,"total_committers":2,"mean_commits":6.5,"dds":0.07692307692307687,"last_synced_commit":"c05be059838798e257db2945a4802763d25e8003"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noahflk%2Freact-relaxed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noahflk%2Freact-relaxed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noahflk%2Freact-relaxed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noahflk%2Freact-relaxed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noahflk","download_url":"https://codeload.github.com/noahflk/react-relaxed/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221396149,"owners_count":16812325,"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","hooks","react","react-hook","react-hooks","throttle"],"created_at":"2024-10-11T02:28:36.633Z","updated_at":"2024-10-27T10:51:17.345Z","avatar_url":"https://github.com/noahflk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  react-relaxed 🐌 \n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  React Hooks for debouncing and throttling inputs or any other changing value\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-relaxed\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-relaxed.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/noahflk/react-relaxed/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/react-relaxed.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Installation\n\n### NPM\n\n```\nnpm install react-relaxed\n```\n\n### Yarn\n\n```\nyarn add react-relaxed\n```\n\n## Demo\n\nTry with [Codesandbox](https://codesandbox.io/s/react-relaxed-demo-0iyrs)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/demonstration.gif\" alt=\"Example of throttle and debounce functionality\" /\u003e\n\u003c/p\u003e\n\n## Usage\n\n### Debounce\n\nDelays updating the returned `debouncedValue` variable until a given number of miliseconds have elapsed since the last time the `value` argument was changed.\n\n```jsx\nimport { useState } from \"react\";\nimport { useDebounce } from \"react-relaxed\";\n\nconst App = () =\u003e {\n  const [value, setValue] = useState(\"initial value\");\n  const [debouncedValue] = useDebounce(value, 500);\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput value={value} onChange={(event) =\u003e setValue(event.target.value)} /\u003e\n      \u003cp\u003e{value}\u003c/p\u003e\n      \u003cp\u003e{debouncedValue}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nWith `useDebounceState` you do not need a seperate `useState` hook to keep track of the state. Apart form that, it's the same as `useDebounce`.\n\n```jsx\nimport { useDebounceState } from \"react-relaxed\";\n\nconst App = () =\u003e {\n  const [value, setValue, debouncedValue] = useDebounceState(\"initial value\", 500);\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput value={value} onChange={(event) =\u003e setValue(event.target.value)} /\u003e\n      \u003cp\u003e{value}\u003c/p\u003e\n      \u003cp\u003e{debouncedValue}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Throttle\n\nThe returned `throttledValue` gets updated at must once every given number of miliseconds, assuming the `value` argument changes more often than that.\n\n```jsx\nimport { useState } from \"react\";\nimport { useThrottle } from \"react-relaxed\";\n\nconst App = () =\u003e {\n  const [value, setValue] = useState(\"initial value\");\n  const [throttledValue] = useThrottle(value, 500);\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput value={value} onChange={(event) =\u003e setValue(event.target.value)} /\u003e\n      \u003cp\u003e{value}\u003c/p\u003e\n      \u003cp\u003e{throttledValue}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nWith `useThrottleState` you do not need a seperate `useState` hook to keep track of the state. Apart form that, it's the same as `useThrottle`.\n\n```jsx\nimport { useThrottleState } from \"react-relaxed\";\n\nconst App = () =\u003e {\n  const [value, setValue, throttledValue] = useThrottleState(\"initial value\", 500);\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput value={value} onChange={(event) =\u003e setValue(event.target.value)} /\u003e\n      \u003cp\u003e{value}\u003c/p\u003e\n      \u003cp\u003e{throttledValue}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## API\n\n### useDebounce\n\n```js\nconst [debouncedValue] = useDebounce(value, delay, {\n  onChange,\n  leading,\n  trailing,\n  maxWait,\n});\n```\n\n#### Returns\n\n- `debouncedValue: T = any`\n  - The debounced value\n\n#### Arguments\n\n- `value: T = any`\n  - Input value that gets debounced\n- `delay: number`\n  - Number of miliseconds that must have elapsed since the last time `value` was changed before `debouncedValue` gets updated\n- `leading: boolean = false`\n  - Update `debouncedValue` at the leading edge\n  - Update takes place **before** each `delay`\n- `trailing: boolean = true`\n  - Update `debouncedValue` at the leading edge\n  - Update takes place **after** each `delay`\n- `onChange: fn(value) =\u003e void`\n  - Input value that gets debounced\n- `maxWait: number`\n  - Number of miliseconds after which `debouncedValue` gets updated, even if there is continous input\n\n### useDebounceState\n\n```js\nconst [value, setValue, debouncedValue] = useDebounceState(initialValue, delay, {\n  onChange,\n  leading,\n  trailing,\n  maxWait,\n});\n```\n\n#### Returns\n\n- `value: T = any`\n  - Value state\n- `setValue: React.SetStateAction`\n  - Sets / updates value state\n- `debouncedValue: T = any`\n  - The debounced value\n\n#### Arguments\n\n- `initialValue: T = any`\n  - Initial value for state\n- `delay: number`\n  - Number of miliseconds that must have elapsed since the last time `value` was changed before `debouncedValue` gets updated\n- `leading: boolean = false`\n  - Update `debouncedValue` at the leading edge\n  - Update takes place **before** each `delay`\n- `trailing: boolean = true`\n  - Update `debouncedValue` at the leading edge\n  - Update takes place **after** each `delay`\n- `onChange: fn(value) =\u003e void`\n  - Input value that gets debounced\n- `maxWait: number`\n  - Number of miliseconds after which `debouncedValue` gets updated, even if there is continous input\n\n### useThrottle\n\n```js\nconst [throttledValue] = useThrottle(value, delay, {\n  onChange,\n  leading,\n  trailing,\n});\n```\n\n#### Returns\n\n- `throttled: T = any`\n  - The throttled value\n\n#### Arguments\n\n- `value: T = any`\n  - Input value that gets throttled\n- `delay: number`\n  - Number of miliseconds between every update of `throttledValue`, provided `value` argument changes more often than that\n- `leading: boolean = false`\n  - Update `debouncedValue` at the leading edge\n  - Update takes place **before** each `delay`\n- `trailing: boolean = true`\n  - Update `debouncedValue` at the leading edge\n  - Update takes place **after** each `delay`\n- `onChange: fn(value) =\u003e void`\n  - Input value that gets debounced\n\n### useThrottleState\n\n```js\nconst [value, setValue, throttledValue] = useThrottleState(initialValue, delay, {\n  onChange,\n  leading,\n  trailing,\n});\n```\n\n#### Returns\n\n- `value: T = any`\n  - Value state\n- `setValue: React.SetStateAction`\n  - Sets / updates value state\n- `throttled: T = any`\n  - The throttled value\n\n#### Arguments\n\n- `initialValue: T = any`\n  - Initial value for state\n- `delay: number`\n  - Number of miliseconds that must have elapsed since the last time `value` was changed before `throttledValue` gets updated\n- `leading: boolean = false`\n  - Update `throttledValue` at the leading edge\n  - Update takes place **before** each `delay`\n- `trailing: boolean = true`\n  - Update `debouncedValue` at the leading edge\n  - Update takes place **after** each `delay`\n- `onChange: fn(value) =\u003e void`\n  - Input value that gets debounced\n\n## Other solutions\n\n[use-debounce](https://github.com/xnimorz/use-debounce)\n\n## Credits\n\nThis package used [create-react-hook](https://github.com/Hermanya/create-react-hook) CLI for setting up the build proccess.\n\n## License\n\n`react-relaxed` is available under the MIT license. See the [LICENSE](LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoahflk%2Freact-relaxed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoahflk%2Freact-relaxed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoahflk%2Freact-relaxed/lists"}