Documentation

hookli is 66 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. 1

    Install

    Add hookli to your React app.

    npm i hookli
  2. 2

    Import

    Pull in exactly the hook you need.

    import { useToggle } from "hookli"
  3. 3

    Use it

    Call it in a component — no providers, no config.

Quick example

Import a hook and use it — no providers, no setup.

details.tsxtsx
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

Effects

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.useDraggableDrag an element with pointer or keyboard: bounds, grid, axis lock, smoothing, and jump-to-click.useHotkeysBind a keyboard shortcut combo (e.g. ctrl+k) to a callback.useFullscreenControl the Fullscreen API for an element and track its state.

Data