use-debounce
Advanced tools
use-debounce - npm Package Compare versions
Comparing version 5.0.0-beta to 5.0.0
| { | ||
| "name": "use-debounce", | ||
| "version": "5.0.0-beta", | ||
| "version": "5.0.0", | ||
| "description": "Debounce hook for react", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -28,2 +28,6 @@ # useDebounce react hook | ||
| ## Changelog | ||
| https://github.com/xnimorz/use-debounce/blob/master/CHANGELOG.md | ||
| ## Simple values debouncing | ||
@@ -69,3 +73,3 @@ | ||
| // Debounce callback | ||
| const [debouncedCallback] = useDebouncedCallback( | ||
| const debounced = useDebouncedCallback( | ||
| // function | ||
@@ -79,6 +83,6 @@ (value) => { | ||
| // you should use `e => debouncedCallback(e.target.value)` as react works with synthetic evens | ||
| // you should use `e => debounced.callback(e.target.value)` as react works with synthetic evens | ||
| return ( | ||
| <div> | ||
| <input defaultValue={defaultValue} onChange={(e) => debouncedCallback(e.target.value)} /> | ||
| <input defaultValue={defaultValue} onChange={(e) => debounced.callback(e.target.value)} /> | ||
| <p>Debounced value: {value}</p> | ||
@@ -101,3 +105,3 @@ </div> | ||
| // Debounce callback | ||
| const [scrollHandler] = useDebouncedCallback( | ||
| const debounced = useDebouncedCallback( | ||
| // function | ||
@@ -112,3 +116,3 @@ () => { | ||
| useEffect(() => { | ||
| const unsubscribe = subscribe(window, 'scroll', scrollHandler); | ||
| const unsubscribe = subscribe(window, 'scroll', debounced.callback); | ||
| return () => { | ||
@@ -146,3 +150,3 @@ unsubscribe(); | ||
| const [value, setValue] = useState(defaultValue); | ||
| const [debouncedFunction, cancel] = useDebouncedCallback( | ||
| const debounced = useDebouncedCallback( | ||
| (value) => { | ||
@@ -156,8 +160,8 @@ setValue(value); | ||
| // you should use `e => debouncedFunction(e.target.value)` as react works with synthetic evens | ||
| // you should use `e => debounced.callback(e.target.value)` as react works with synthetic evens | ||
| return ( | ||
| <div> | ||
| <input defaultValue={defaultValue} onChange={(e) => debouncedFunction(e.target.value)} /> | ||
| <input defaultValue={defaultValue} onChange={(e) => debounced.callback(e.target.value)} /> | ||
| <p>Debounced value: {value}</p> | ||
| <button onClick={cancel}>Cancel Debounce cycle</button> | ||
| <button onClick={debounced.cancel}>Cancel Debounce cycle</button> | ||
| </div> | ||
@@ -171,5 +175,5 @@ ); | ||
| #### callPending method | ||
| #### Flush method | ||
| `useDebouncedCallback` has `callPending` method. It allows to call the callback manually if it hasn't fired yet. This method is handy to use when the user takes an action that would cause the component to unmount, but you need to execute the callback. | ||
| `useDebouncedCallback` has `flush` method. It allows to call the callback manually if it hasn't fired yet. This method is handy to use when the user takes an action that would cause the component to unmount, but you need to execute the callback. | ||
@@ -181,3 +185,3 @@ ```javascript | ||
| function InputWhichFetchesSomeData({ defaultValue, asyncFetchData }) { | ||
| const [debouncedFunction, cancel, callPending] = useDebouncedCallback( | ||
| const debounced = useDebouncedCallback( | ||
| (value) => { | ||
@@ -193,8 +197,8 @@ asyncFetchData; | ||
| () => () => { | ||
| callPending(); | ||
| debounced.flush(); | ||
| }, | ||
| [callPending] | ||
| [debounced] | ||
| ); | ||
| return <input defaultValue={defaultValue} onChange={(e) => debouncedFunction(e.target.value)} />; | ||
| return <input defaultValue={defaultValue} onChange={(e) => debounced.callback(e.target.value)} />; | ||
| } | ||
@@ -201,0 +205,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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.06%
36315
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by1.72%
237