https://github.com/seonhyungjo/use-delay
⏳Easy Throttle, Debounds Hooks
https://github.com/seonhyungjo/use-delay
debounds delay hooks react throttle
Last synced: about 1 year ago
JSON representation
⏳Easy Throttle, Debounds Hooks
- Host: GitHub
- URL: https://github.com/seonhyungjo/use-delay
- Owner: SeonHyungJo
- Created: 2020-01-26T20:53:24.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:28:40.000Z (over 3 years ago)
- Last Synced: 2025-03-26T08:34:20.790Z (about 1 year ago)
- Topics: debounds, delay, hooks, react, throttle
- Language: JavaScript
- Homepage: https://seonhyungjo.github.io/use-delay/
- Size: 3.39 MB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React useDelay Hooks
[](https://www.npmjs.com/package/use-delay) [](https://standardjs.com)
## Install
```bash
npm install --save use-delay
```
## Usage
```tsx
import React, { useCallback, useState } from 'react'
import { useThrottle, useDebounds } from 'use-delay'
const App = () => {
const [throttleCount, setThrottleCount] = useState(0);
const [deboundsCount, setDeboundsCount] = useState(0);
const actionThrottleHandle = useCallback(() => {
setThrottleCount(throttleCount + 1)
})
const actionDeboundsHandle = useCallback(() => {
setDeboundsCount(deboundsCount + 1)
})
const onTrottle = useThrottle(1000, actionThrottleHandle)
const onDebounds = useDebounds(1000, actionDeboundsHandle)
return (
{`throttle count ${throttleCount}`}
throttle
{`debounds count ${deboundsCount}`}
debounds
)
}
export default App
```
```css
* {
box-sizing: border-box;
}
.outerDiv {
display: block;
width: 100%;
height: 500px;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid #000
}
.throttleDiv {
display: inline-block;
width: 50%;
height: 500px;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid red;
}
.deboundsDiv {
display: inline-block;
width: 50%;
height: 500px;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid blue;
}
.innerDiv {
width: 100px;
height: 100px;
border: 1px solid green;
margin-top: 1500px;
}
.fixcount {
position: fixed;
}
```
## License
MIT © :mouse:[snyung](https://github.com/seonhyungjo)
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).