this project was heavily inspired by usehooks.dev and built with the purpose of increasing qwik ecosystem. by: @victorditadi
useDebounce
Delay the execution of function or state update with useDebounce.
INSTALL:
npm i @ditadi/qwik-hooks
DESCRIPTION:The useDebounce hook is useful for delaying the execution of functions or state updates until a specified time period has passed without any further changes to the input value. This is especially useful in scenarios such as handling user input or triggering network requests, where it effectively reduces unnecessary computations and ensures that resource-intensive operations are only performed after a pause in the input activity.
PARAMETERS
| Name | Type | Description |
|---|---|---|
| value | T | The value that you want to debounce. This can be of any type. |
| delay | number | The delay time in milliseconds. After this amount of time, the latest value is used. |
| fn | QRL<() => Promise<void>> | The function that you want to execute after the delay time has passed. This is an optional parameter. |
RETURN VALUEThe useDebounce hook returns an array with the following elements:
| Name | Type | Description |
|---|---|---|
| debouncedValue | Signal<{width: number, height: number;}> | The debounced value. After the delay time has passed without the value changing, this will be updated to the latest value. |
| isDebouncing | Signal<boolean> | A boolean signal that indicates whether the debouncing process is currently active or not. |
DEMO:
List of Movies
No movies found
Example:
MORE HOOKS:
useDebounce
Delay the execution of function or state update with useDebounce.
useLocalStorage
Store, retrieve, and synchronize data from the browser’s localStorage API with useLocalStorage
useCopyClipboard
Copy text to the clipboard using useCopyClipboard.
useWindowSize
Track the dimensions of the browser window with useWindowSize.
usePrevious
Track the previous value of a variable with usePrevious.
useMediaQuery
Subscribe and respond to media query changes with useMediaQuery.
useClickOutside
Detect clicks outside of specific component with useClickOutside.
more to come...
this a new library, more hooks will be added soon.