this project was heavily inspired by usehooks.dev and built with the purpose of increasing qwik ecosystem. by: @victorditadi
useClickOutside
Detect clicks outside of specific component with useClickOutside.
INSTALL:
npm i @ditadi/qwik-hooks
DESCRIPTION:The useClickOutside hook is a useful for detecting clicks outside a specific component. It allows you to pass a callback function that will be triggered whenever a click occurs outside the component’s area. This hook is particularly helpful when implementing dropdown menus, modals, or any other UI elements that need to be closed when the user clicks outside of them. By attaching event listeners to the document, the hook checks if the click target is within the component’s reference, and if not, it invokes the provided callback function.
PARAMETERS
| Name | Type | Description |
|---|---|---|
| callback | function | The callback function that is provided as an argument to useClickOutside. This function is invoked whenever a click event is detected outside of the referenced element. The event object from the click is passed to this callback function. |
DEMO:
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.