Zero-dependency React hooks

hookli.

Simple React hooks. Typed. SSR-safe. Zero dependencies.

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

The hooks you keep rewriting

Small enough to read in an afternoon, solid enough to ship everywhere.

Zero dependencies

The only thing you install is the hooks. No runtime deps, no transitive surprises, nothing to audit twice.

TypeScript-first

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

SSR-safe

Browser APIs are guarded behind effects, so Next.js and friends 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.

41 hooks & counting

State, storage, DOM, and data — the hooks you rewrite in every project, done once and typed.

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

The library

All 41 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.

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.

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.

Data

useFetchDeclarative fetch with loading and error status.useGeoLocationBrowser geolocation 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

Stop rewriting the same hooks.

npm i hookli
Explore the docs