this project was heavily inspired by usehooks.dev and built with the purpose of increasing qwik ecosystem. by: @victorditadi
useCopyClipboard
Copy text to the clipboard using useCopyClipboard.
INSTALL:
npm i @ditadi/qwik-hooks
DESCRIPTION:The useCopyToClipboard hook is useful because it abstracts the complexity of copying text to the clipboard in a cross-browser compatible manner. It utilizes the modern navigator.clipboard.writeText method if available, which provides a more efficient and secure way to copy text. In case the writeText method is not supported by the browser, it falls back to a traditional method using the document.execCommand(“copy”) approach
PARAMETERS
| Name | Type | Description |
|---|---|---|
| timeout | number (optional) | The timeout in milliseconds to execute the copy operation. Default is 300ms. |
RETURN VALUEThe useCopyClipboard hook returns an array with the following elements:
| Name | Type | Description |
|---|---|---|
| copy | Signal<string | boolean | null> | The value that was last copied to the clipboard. |
| setCopy | QRL<(value: string | boolean | null) => Promise<void>> | A function to copy a specified value to the clipboard. |
| isCopying | Signal<boolean> | A boolean signal that indicates whether the copy operation is in progress. |
DEMO:
click at button to copy
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.