Hooks

useAnimation

A boolean flag that switches on when triggered and turns itself off after a set duration, for one-shot CSS animations.

useClipboard

Copy text to the clipboard with a temporary copied state, error handling and a fallback for insecure contexts.

useDarkMode

Toggle a persisted dark class on the document (or a scoped element) that follows the system color scheme until the user chooses.

useDateFormatter

Memoized, locale-aware absolute, relative and range date formatting built on the Intl API.

useDebounce

Debounce a changing value, or a callback with cancel and flush controls.

useDeviceDetection

Classify the device as mobile, tablet or desktop from viewport media queries, with pointer and hover capabilities.

useFetch

Fetch data with status, error and refetch, aborting stale requests when the URL changes or the component unmounts.

useForm

Manage typed form values, derived validation errors, touched fields and submission in one hook.

useHover

Track whether the pointer is over an element through a callback ref.

useKeyPress

Detect keys and shortcuts like mod+k, returning whether they are held and optionally calling a handler.

useLocalStorage

useState that persists to localStorage as JSON and stays in sync across components and browser tabs.

useOnClickOutside

Run a handler when a pointer or touch starts outside one or more referenced elements.

useOnlineStatus

Read the browser's live online or offline connection status.

usePrevious

Return the previous distinct value of a prop or state.

useScrollPosition

Track the scroll offset of the window or a scrollable element.

useWindowSize

Track the viewport's width and height as it resizes.