this project was heavily inspired by usehooks.dev and built with the purpose of increasing qwik ecosystem. by: @victorditadi
useMediaQuery
Subscribe and respond to media query changes with useMediaQuery.
INSTALL:
npm i @ditadi/qwik-hooks
DESCRIPTION:The useMediaQuery hook leverages the window.matchMedia API to subscribe to CSS media query changes, thereby providing real-time responsiveness to dynamic changes in the viewport or screen orientation. It allows the component to rerender whenever the media query’s result changes. It throws an error if attempted to be used on the server-side (media queries only work in the browser).
PARAMETERS
| Name | Type | Description |
|---|---|---|
| query | string | The media query to listen changes |
RETURN VALUEThe useMediaQuery hook returns an array with the following elements:
| Name | Type | Description |
|---|---|---|
| s | Signal<boolean> | Returns a boolean value indicating whether the media query matches the current state of the device. |
DEMO:
useMediaQuery
Resize your browser windows to see changesMobile
Medium
Large
Extra Large
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.