this project was heavily inspired by usehooks.dev and built with the purpose of increasing qwik ecosystem. by: @victorditadi
useWindowSize
Track the dimensions of the browser window with useWindowSize.
INSTALL:
npm i @ditadi/qwik-hooks
DESCRIPTION:The useWindowSize hook is a useful for retrieving and tracking the dimensions of the browser window within a React component. It attaches an event listener to the “resize” event, ensuring that the size is updated dynamically whenever the window is resized. The hook returns the “size” object, enabling components to access and utilize the window dimensions for various purposes, such as responsive layout adjustments, conditional rendering, or calculations based on the available space.
PARAMETERSNone
RETURN VALUEThe useWindowSize hook returns an array with the following elements:
| Name | Type | Description |
|---|---|---|
| size | Signal<{width: number, height: number;}> | The current width and height of the window, in pixels. |
DEMO:
useWindowSize
Width: Height:
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.