Documentation
hookli is 65 React hooks for the state, DOM, and data chores every app repeats — typed end to end, SSR-safe, and free of dependencies. Every hook on this site runs live on its page, so you can try it before you install it.
Building with an LLM?
Every hook — signatures, usage and source — as plain Markdown for AI assistants and coding agents, generated from this site so it never drifts.
Quick start
- 1
Install
Add hookli to your React app.
npm i hookli - 2
Import
Pull in exactly the hook you need.
import { useToggle } from "hookli" - 3
Use it
Call it in a component — no providers, no config.
Quick example
Import a hook and use it — no providers, no setup.
import { useToggle } from "hookli";
function Details() {
const [open, toggle] = useToggle(false);
return (
<section>
<button onClick={toggle}>{open ? "Hide" : "Show"} details</button>
{open && <p>Rendered only while open.</p>}
</section>
);
}Hooks
State
useToggleBoolean state with toggle and explicit set.useFormControlled form state with one change handler.useLocalStorageState persisted to localStorage.useLocalStorageWithExpiryPersisted state with a TTL.useSessionStorageuseState backed by sessionStorage, synced across tabs.useReadLocalStorageRead a localStorage key without writing it, reactively.useDarkModeDark-mode boolean with toggle.useTernaryDarkModeThree-state dark mode — system, dark or light — persisted.useBooleanBoolean state with setTrue, setFalse, toggle and set.useCounterNumeric counter with increment, decrement and reset.useStep1-indexed step counter for wizards and steppers.useCountdownSelf-stopping countdown or count-up timer.useMapManage a Map as immutable React state.usePreviousTrack a value from the previous render.useListArray state with push, insert, update, remove, and clear helpers.useSetSet state with add, remove, toggle, has, and clear helpers.useQueueFIFO queue state with add, remove, clear, and first/last/size.useDefaultuseState that falls back to a default when the value is nullish.useRafStateuseState whose updates are batched to the next animation frame.
Effects
useDebounceDebounces a changing value.useDebounceValueState whose debounced copy updates after a pause.useDebounceCallbackDebounces a callback, with cancel, flush and isPending.useIntervalRuns a callback on a fixed interval; pause by passing null.useTimeoutRuns a callback once after a delay; cancel by passing null.useIsomorphicLayoutEffectuseLayoutEffect on the client, useEffect on the server.useEventCallbackA stable callback that always calls the latest closure.useUnmountRuns a cleanup function once, when the component unmounts.useIsClientReports false on the server and true after hydration.useIsMountedA stable getter for whether the component is still mounted.useDocumentTitleKeeps document.title in sync with a value, SSR-safe.useThrottleThrottle a fast-changing value to at most one update per interval.useUpdateEffectA useEffect that skips the initial mount and runs only on updates.useEffectOnceRun an effect exactly once, on mount.usePageVisibilityTrack whether the page/tab is currently visible.useDeepCompareEffectuseEffect that compares dependencies by deep structural equality.
DOM
useEventListenerSubscribe to a window, document or element event with cleanup.useClickOutsideRuns a callback on outside click.useMousePositionCursor coordinates within an element.useInfiniteScrollTriggers loading near the scroll end.useExpandableTextCollapse long text by a character and/or line budget with a show-more toggle.useHoverTracks whether the pointer is hovering an element.useIntersectionObserverObserve an element's viewport intersection reactively.useResizeObserverMeasure an element's size reactively via ResizeObserver.useScrollLockLock and restore scrolling on the body or an element.useClickAnyWhereRun a handler on every click anywhere in the document.useMediaQueryTracks whether a CSS media query currently matches.useScreenTracks window.screen, refreshing it on every resize.useWindowSizeTracks the viewport's { width, height }, updated on resize.useCopyToClipboardCopy text to the clipboard, tracking the last copied value.useScriptLoad an external script and report its load status.useKeyPressTrack whether a specific key is currently held down.useWindowScrollTrack the window scroll position reactively.useIdleDetect user inactivity after a configurable threshold.useTextSelectionTrack the text the user has currently selected on the page.useLongPressDetect a long press (mouse or touch) via spreadable handlers.useHotkeysBind a keyboard shortcut combo (e.g. ctrl+k) to a callback.useFullscreenControl the Fullscreen API for an element and track its state.
Data
useFetchDeclarative fetch with loading and error status.useGeoLocationBrowser geolocation state.useAsyncRun an async function and track its loading, error, and value state.useMutationRun an async write action on demand and track status, data, and error.usePaginationPage, page size, total pages, navigation helpers, and the current item range.useNetworkStateTrack online/offline status and connection details.useBatteryRead device battery level and charging state (where supported).usePermissionQuery a Permissions API permission and track its state.