New — hookli speaks AI

Zero-dependency React hooks, ready to ship.

hookli.

Every hook you rewrite — typed, SSR-safe, zero dependencies.

npm i hookli
Explore the docsStar on GitHub
  • 65 typed hooks
  • Zero dependencies
  • SSR-safe
  • ESM + CJS
Why hookli

Built for the hooks you copy-paste every project

Small enough to read in an afternoon. Solid enough to ship in production.

Zero dependencies

No lodash, no debounce utils, no transitive surprises — React is the only thing you install besides the hooks.

TypeScript-first

Written in TypeScript, shipped with full definitions. Generics and inference just work — no @types hunt.

SSR-safe

Browser APIs stay behind effects by convention — Next.js and Remix prerender without a single window crash.

Tree-shakable

Import one hook, ship one hook. Bundlers drop everything you don't use.

ESM + CJS

Dual builds out of the box — modern bundlers, legacy tooling, and everything in between.

65 hooks & counting

State, storage, DOM, and light data fetching — the daily-driver set, not a kitchen-sink toolkit.

Why hookli

The hooks you keep rewriting — done once

Closest peers like usehooks-ts cover similar ground. hookli pushes harder on zero deps, SSR safety, and docs that never drift from the package you install.

  • Runtime dependencies

    hookli:Zero — React is the only peer

    Others:Often lodash, debounce helpers, or other utility packages

  • SSR safety

    hookli:Required by convention — every hook guards browser APIs

    Others:Varies hook by hook; easy to break Next.js prerender

  • Documentation

    hookli:Live demos import the published npm package

    Others:Often README-only, or docs that drift from the code

  • Hook list accuracy

    hookli:Manifest drives README, docs, and hook count

    Others:Hand-maintained lists that fall out of sync

  • Test coverage

    hookli:Every hook has a colocated vitest test

    Others:Inconsistent — some hooks tested, many aren't

  • Bundle cost

    hookli:Tree-shakable — import one hook, ship one hook

    Others:Shared util layers can pull in more than you use

Not trying to be TanStack Query or a kitchen-sink toolkit — just the typed, SSR-safe hooks you copy-paste in every project, packaged so you never copy-paste them again.

Live proof

This demo runs the code beside it

The preview imports useTogglestraight from the published npm package — the same code you'd ship.

light-switch.tsxtsx
import { useToggle } from "hookli";

export function LightSwitch() {
  const [on, toggle] = useToggle(false);

  return (
    <button onClick={toggle} aria-pressed={on}>
      {on ? "On" : "Off"}
    </button>
  );
}

live · imported from hookli

AI-ready

Bring your AI — it speaks hookli

Vibe-coding with an LLM? hookli ships a machine-readable map of all 65 hooks, so your assistant recommends and wires them up correctly — no stale copy-paste.

One file, the whole library

Point any model at /llms.txt for the map, or /llms-full.txt for every signature, usage and source — generated from the same registry the docs use.

Copy any hook for AI

Every hook page has a one-click Copy for AI — clean Markdown, ready to paste into your chat and start building.

Straight into your chat

Jump into ChatGPT or Claude prefilled with the hook's context and a live docs link. Your AI pair is in the loop from line one.

View /llms.txtOpen in ChatGPTOpen in Claude
The library

All 65 hooks

Each one documented with a live demo — try it before you install it.

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.
Get involved

Support hookli

hookli is free and ISC-licensed. It runs on stars, issues, pull requests, and sponsorships.

Star it

The fastest way to help — stars bring the contributors that keep hookli moving.

Star on GitHub

Contribute

Report a bug, sharpen the docs, or add the hook you keep rewriting anyway.

How to contribute

Sponsor

Back ongoing maintenance and new hooks through GitHub Sponsors — any amount helps.

Become a sponsor

Every hook you rewrite — one import away.

Typed, SSR-safe, zero dependencies. Import what you need and ship.

npm i hookli
Explore the docs