Hooks

Reusable React hooks exported from @repo/ui for common UI patterns.

Import

import { useKeyboardShortcut, useMediaQuery, useCopyToClipboard } from "@repo/ui";

Hook	Description
`useClickHandlers`	Provides onClick and onDoubleClick handlers that don't conflict with each other.
`useColumnVisibility`	Manages column visibility state for table components.
`useCookies`	Read and write browser cookies with a React-friendly API.
`useCopyToClipboard`	Copy text to clipboard with a copied state that resets after a timeout.
`useCurrentAnchor`	Track the currently active anchor/hash in the URL for scroll-spy behavior.
`useCurrentSubdomain`	Extract the current subdomain from the browser URL.
`useEnterSubmit`	Handle Enter key to submit forms (with Shift+Enter for newlines).
`useInViewport`	Detect whether an element is visible in the viewport using IntersectionObserver.
`useInputFocused`	Track whether any input element on the page currently has focus.
`useIntersectionObserver`	Low-level IntersectionObserver hook for custom viewport detection logic.
`useKeyboardShortcut`	Register global keyboard shortcuts with modifier key support.
`useLocalStorage`	Persist state to localStorage with automatic JSON serialization.
`useMediaQuery`	React to CSS media query changes (e.g. responsive breakpoints, dark mode).
`useOptimisticUpdate`	Optimistically update UI state and roll back on error.
`usePagination`	Manage pagination state — current page, page size, total pages.
`useRemoveGaParams`	Automatically strip Google Analytics UTM parameters from the URL.
`useResizeObserver`	Observe element size changes via the ResizeObserver API.
`useRouterStuff`	Utilities for reading and updating URL search params with Next.js router.
`useScroll`	Track the window scroll position for scroll-based UI effects.
`useScrollProgress`	Track scroll progress as a percentage (0-100) of a container or the page.
`useToastWithUndo`	Show a toast notification with an undo action that reverts the operation.