Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-hook/throttle
Advanced tools
@react-hook/throttle - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
@@ -14,19 +14,3 @@ 'use strict' | ||
| calledLeading = (0, _react.useRef)(false), | ||
| wait = 1000 / fps | ||
| const next = (0, _react.useCallback)( | ||
| (this_, args) => { | ||
| nextTimeout.current = null | ||
| tailTimeout.current === null && (calledLeading.current = false) | ||
| fn.apply(this_, args) | ||
| }, | ||
| [fn] | ||
| ) | ||
| const tail = (0, _react.useCallback)( | ||
| (this_, args) => { | ||
| tailTimeout.current = null | ||
| calledLeading.current = false | ||
| nextTimeout.current === null && fn.apply(this_, args) | ||
| }, | ||
| [fn] | ||
| ) // cleans up pending timeouts when the function changes | ||
| wait = 1000 / fps // cleans up pending timeouts when the function changes | ||
@@ -50,21 +34,30 @@ function _ref() { | ||
| function() { | ||
| const this_ = this | ||
| const args = arguments | ||
| const this_ = this, | ||
| args = arguments | ||
| function _ref2() { | ||
| return next(this_, args) | ||
| nextTimeout.current = null | ||
| tailTimeout.current === null && (calledLeading.current = false) | ||
| fn.apply(this_, args) | ||
| } | ||
| function _ref3() { | ||
| return tail(this_, args) | ||
| tailTimeout.current = null | ||
| calledLeading.current = false | ||
| nextTimeout.current === null && fn.apply(this_, args) | ||
| } | ||
| if (nextTimeout.current === null) { | ||
| const next = _ref2 | ||
| if (leading === true && calledLeading.current === false) { | ||
| next(this_, args) | ||
| // leading | ||
| next() | ||
| calledLeading.current = true | ||
| } else { | ||
| nextTimeout.current = (0, _requestTimeout.requestTimeout)(_ref2, wait) | ||
| // head | ||
| nextTimeout.current = (0, _requestTimeout.requestTimeout)(next, wait) | ||
| } | ||
| } else { | ||
| // tail | ||
| tailTimeout.current !== null && | ||
@@ -71,0 +64,0 @@ (0, _requestTimeout.clearRequestTimeout)(tailTimeout.current) |
@@ -7,19 +7,3 @@ import {useEffect, useCallback, useState, useRef} from 'react' | ||
| calledLeading = useRef(false), | ||
| wait = 1000 / fps | ||
| const next = useCallback( | ||
| (this_, args) => { | ||
| nextTimeout.current = null | ||
| tailTimeout.current === null && (calledLeading.current = false) | ||
| fn.apply(this_, args) | ||
| }, | ||
| [fn] | ||
| ) | ||
| const tail = useCallback( | ||
| (this_, args) => { | ||
| tailTimeout.current = null | ||
| calledLeading.current = false | ||
| nextTimeout.current === null && fn.apply(this_, args) | ||
| }, | ||
| [fn] | ||
| ) // cleans up pending timeouts when the function changes | ||
| wait = 1000 / fps // cleans up pending timeouts when the function changes | ||
@@ -43,21 +27,30 @@ function _ref() { | ||
| function() { | ||
| const this_ = this | ||
| const args = arguments | ||
| const this_ = this, | ||
| args = arguments | ||
| function _ref2() { | ||
| return next(this_, args) | ||
| nextTimeout.current = null | ||
| tailTimeout.current === null && (calledLeading.current = false) | ||
| fn.apply(this_, args) | ||
| } | ||
| function _ref3() { | ||
| return tail(this_, args) | ||
| tailTimeout.current = null | ||
| calledLeading.current = false | ||
| nextTimeout.current === null && fn.apply(this_, args) | ||
| } | ||
| if (nextTimeout.current === null) { | ||
| const next = _ref2 | ||
| if (leading === true && calledLeading.current === false) { | ||
| next(this_, args) | ||
| // leading | ||
| next() | ||
| calledLeading.current = true | ||
| } else { | ||
| nextTimeout.current = requestTimeout(_ref2, wait) | ||
| // head | ||
| nextTimeout.current = requestTimeout(next, wait) | ||
| } | ||
| } else { | ||
| // tail | ||
| tailTimeout.current !== null && clearRequestTimeout(tailTimeout.current) | ||
@@ -64,0 +57,0 @@ tailTimeout.current = requestTimeout(_ref3, wait) |
| { | ||
| "name": "@react-hook/throttle", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "main": "dist/cjs/index.js", | ||
@@ -5,0 +5,0 @@ "author": "Jared Lunde <jared@BeStellar.co> (https://BeStellar.co)", |
@@ -11,11 +11,54 @@ # @react-hook/throttle | ||
| import {useThrottle, useThrottleCallback} from '@react-hook/throttle' | ||
| // throttling a value | ||
| const F = props => { | ||
| // basic usage | ||
| const [value, setValue] = useThrottle('initialValue', 30/*fps*/, true/*leading*/) | ||
| // this is actually the same code for useThrottle() | ||
| const [state, setState] = useState(initialState) | ||
| const [state, throttledState] = useThrottleCallback(setState, 30/*fps*/, true/*leading*/) | ||
| const [value, setValue] = useThrottle( | ||
| 'initialValue', | ||
| 30/*fps*/, | ||
| true/*leading*/ | ||
| ) | ||
| } | ||
| ``` | ||
| // throttling a callback | ||
| const CallbackExample = (initialState, fps = 30, leading = false) => { | ||
| // this is the exact code that useThrottle() uses | ||
| const [state, setState] = useState(initialState) | ||
| return [ | ||
| state, | ||
| useThrottleCallback(setState, fps, leading) | ||
| ] | ||
| } | ||
| ``` | ||
| ### `useThrottle(initialValue: any, fps: number, leading: bool)` | ||
| - `initialValue` `<any>` | ||
| - Sets an initial state | ||
| - `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 |
@@ -12,20 +12,2 @@ import {useEffect, useCallback, useState, useRef} from 'react' | ||
| const next = useCallback( | ||
| (this_, args) => { | ||
| nextTimeout.current = null | ||
| tailTimeout.current === null && (calledLeading.current = false) | ||
| fn.apply(this_, args) | ||
| }, | ||
| [fn] | ||
| ) | ||
| const tail = useCallback( | ||
| (this_, args) => { | ||
| tailTimeout.current = null | ||
| calledLeading.current = false | ||
| nextTimeout.current === null && fn.apply(this_, args) | ||
| }, | ||
| [fn] | ||
| ) | ||
| // cleans up pending timeouts when the function changes | ||
@@ -51,17 +33,34 @@ useEffect( | ||
| function () { | ||
| const this_ = this | ||
| const args = arguments | ||
| const | ||
| this_ = this, | ||
| args = arguments | ||
| if (nextTimeout.current === null) { | ||
| const next = () => { | ||
| nextTimeout.current = null | ||
| tailTimeout.current === null && (calledLeading.current = false) | ||
| fn.apply(this_, args) | ||
| } | ||
| if (leading === true && calledLeading.current === false) { | ||
| next(this_, args) | ||
| // leading | ||
| next() | ||
| calledLeading.current = true | ||
| } | ||
| else { | ||
| nextTimeout.current = requestTimeout(() => next(this_, args), wait) | ||
| // head | ||
| nextTimeout.current = requestTimeout(next, wait) | ||
| } | ||
| } | ||
| else { | ||
| // tail | ||
| tailTimeout.current !== null && clearRequestTimeout(tailTimeout.current) | ||
| tailTimeout.current = requestTimeout(() => tail(this_, args), wait) | ||
| tailTimeout.current = requestTimeout( | ||
| () => { | ||
| tailTimeout.current = null | ||
| calledLeading.current = false | ||
| nextTimeout.current === null && fn.apply(this_, args) | ||
| }, | ||
| wait | ||
| ) | ||
| } | ||
@@ -68,0 +67,0 @@ }, |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by9.41%
10399
- Number of lines in readme file
- increased by215%
63
Worsened metrics
- Lines of code
- decreased by-7.92%
186
No dependency changes