@render-props/debounce
v0.1.13
Published
A state container which limits the frequency with which setState can be called using lodash's debounce function. By default, `setState` is invoked on the trailing edge of the debounce call. If `leading` and `trailing` options are `true`, func is invoked
Downloads
11
Maintainers
jaredlundeReadme
Debounce
A state container which limits the frequency with which setState can be called
using lodash's debounce function. By default, setState is invoked on the
trailing edge of the debounce call. If leading and trailing options are true,
func is invoked on the trailing edge of the timeout only if the debounced
function is invoked more than once during the wait timeout.
See lodash's documentation for more details
Installation
yarn add @render-props/debounce or npm i @render-props/debounce
Usage
import Debounce from '@render-props/debounce'
function DebouncedBodyScroller () {
return (
<Debounce initialState={{scrollY: 0, gt30: false}}>
{({debounceState, state}) => (
<body
onScroll={
e => debounceState(
prevState => (
window.scrollY > 30
? {gt30: true, scrollY: window.scrollY}
: {gt30: false, scrollY: window.scrollY}
)
)
}
>
Greater than 30? {String(state.gt30)}
</body>
)}
</Debounce>
)
}Props
initialState {object}: the state which this component should initialize with. This component is NOT controlled so you cannot update the state of this component by changing the property value here.wait {number}: number of milliseconds to delaymaxWait {number}: maximum time func is allowed to be delayed before it's invokedleading {bool}: invokes function on the leading edge of the timeouttraililng {bool}: invokes function on the trailing edge of the timeout
Render Props
Methods
debounceState: this function is setState wrapped in lodash's debounce function.
State
state {object}: in addition to thedebounceStatemethod, this component provides the state exactly as its been set usingdebounceState