this project was heavily inspired by usehooks.dev and built with the purpose of increasing qwik ecosystem. by: @victorditadi
useLocalStorage
Store, retrieve, and synchronize data from the browser’s localStorage API with useLocalStorage
INSTALL:
npm i @ditadi/qwik-hooks
DESCRIPTION:The useLocalStorage hook provides a convenient way to synchronize the state of a component with the data stored in local storage. It automatically reads the initial value from local storage when the component mounts and updates the local storage whenever the state changes. Additionally, it listens for changes in local storage made by other tabs or windows and keeps the component’s state up to date.
PARAMETERS
| Name | Type | Description |
|---|---|---|
| key | string | The key used to access the local storage value. |
| initialValue | any (optional) | The initial value to use if there is no item in the local storage with the provided key. |
RETURN VALUEThe useLocalStorage hook returns an array with the following elements:
| Name | Type | Description |
|---|---|---|
| storedValue | Signal<any> | The current state of the value stored in local storage. |
| setStoredValue | QRL<(newValue: any) => void> | A function to set the state of the value in the local storage. This function accepts a new value or a function that returns a new value. The value is also saved in the local storage under the provided key. |
DEMO:
useLocalStorage
Current Value:
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.