@react-hook/throttle
A react hook for throttling values and callbacks.
Installation
npm i @react-hook/throttle
yarn add @react-hook/throttle
Usage
import {useThrottle, useThrottleCallback} from '@react-hook/throttle'
const F = props => {
const [value, setValue] = useThrottle(
'initialValue',
30,
true
)
}
const CallbackExample = (initialState, fps = 30, leading = false) => {
const [state, setState] = useState(initialState)
return [
state,
useThrottleCallback(setState, fps, leading)
]
}
useThrottle(initialValue: any, fps: number, leading: bool)
initialValue
<any>
fps
<number>
- default 30
- Defines the rate in frames per second with which
setState
is called
leading
<bool>
- default false
- Calls
setState
on the leading edge (right away). When false
setState
will not be called until the next frame is due
Returns [value: any, setValue: function]: array
value
- The value set by
setValue
or the initialValue
setValue
- A throttled
setState
callback
useThrottleCallback(fn: function, fps: number, leading: bool)
fn
<any>
- This is the callback you want to throttle
fps
<number>
- default 30
- Defines the rate in frames per second with which
setState
is called
leading
<bool>
- default false
- Calls
setState
on the leading edge (right away). When false
setState
will not be called until the next frame is due
Returns setValue: function
throttledFn
- The throttled
fn
callback