24 lines
2.5 KiB
Markdown
24 lines
2.5 KiB
Markdown
# [←](../../docs/README.md) @crux-kit/hooks
|
|
|
|
A collection of reusable React hooks for common UI and browser interaction patterns.
|
|
|
|
Each hook is client-side only and tree-shakeable. Detailed documentation for each hook lives alongside its source file.
|
|
|
|
## Available Hooks
|
|
|
|
| Hook | Description | Docs |
|
|
| -------------------- | ----------------------------------------------------------------------- | ----------------------------------------------- |
|
|
| `useBodyClass` | Adds CSS classes to `document.body` while a component is mounted | [Readme.md](./src/useBodyClass/Readme.md) |
|
|
| `useCopyToClipboard` | Copies text to the clipboard with a timed `isCopied` flag | [Readme.md](./src/useCopyToClipboard/Readme.md) |
|
|
| `useCountdown` | Countdown timer that fires a callback on completion | [Readme.md](./src/useCountdown/Readme.md) |
|
|
| `useDebounceSearch` | Debounced search input with a minimum character threshold | [Readme.md](./src/useDebounceSearch/Readme.md) |
|
|
| `useDisclosure` | Boolean open/closed state with `open`, `close`, and `toggle` helpers | [Readme.md](./src/useDisclosure/Readme.md) |
|
|
| `useEffectOnce` | Runs a side-effect exactly once after the initial render | [Readme.md](./src/useEffectOnce/Readme.md) |
|
|
| `useEventListener` | Declarative event listener with automatic cleanup | [Readme.md](./src/useEventListener/Readme.md) |
|
|
| `useIsMobile` | Returns `true` when the viewport is below a breakpoint | [Readme.md](./src/useIsMobile/Readme.md) |
|
|
| `useMounted` | Returns `true` after the component has mounted (SSR-safe) | [Readme.md](./src/useMounted/Readme.md) |
|
|
| `useOutsideClick` | Fires a callback when a click/touch occurs outside a referenced element | [Readme.md](./src/useOutsideClick/Readme.md) |
|
|
| `usePageMeta` | Sets page `<title>` and `<meta name="description">` while mounted | [Readme.md](./src/usePageMeta/Readme.md) |
|
|
| `useScrollPosition` | Tracks vertical scroll position of the window or a specific element | [Readme.md](./src/useScrollPosition/Readme.md) |
|
|
| `useViewport` | Returns current viewport `[height, width]`, updates on resize | [Readme.md](./src/useViewport/Readme.md) |
|