Loading repository data…
Loading repository data…
saifmohamedsv / repository
A tiny, typed collection of the React hooks you reach for every day. Zero deps · SSR-safe · ESM + CJS · fully tree-shakable. npm i hookli
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
npm i hookli
# or
yarn add hookli
# or
pnpm add hookli
Peer dependency: React
>=18.
hookli is a React hooks library, written in TypeScript and easy to use. It gives you a
small, dependency-free set of the hooks you reach for in almost every project — so you stop
re-writing the same debounce, localStorage wrapper, or outside-click listener for the
hundredth time. The hooks are built on the principle of DRY (Don't Repeat Yourself).
The library is designed to be as minimal as possible. It is fully tree-shakable (via the ESM build), meaning you only ship the hooks you import and the rest is removed from your bundle — the cost of adding hookli is negligible. Every hook is typed and SSR-safe, so it drops straight into Next.js / Remix.
import { useLocalStorage } from "hookli";
function Component() {
const { value, setStoredValue } = useLocalStorage("my-key", 0);
// ...
}
📚 Full docs with a page per hook and live demos: https://hookli.vercel.app/docs
useToggle — Boolean state with toggle and explicit set.useForm — Controlled form state with one change handler.useLocalStorage — State persisted to localStorage.useLocalStorageWithExpiry — Persisted state with a TTL.useSessionStorage — useState backed by sessionStorage, synced across tabs.useReadLocalStorage — Read a localStorage key without writing it, reactively.useDarkMode — Dark-mode boolean with toggle.useTernaryDarkMode — Three-state dark mode — system, dark or light — persisted.useBoolean — Boolean state with setTrue, setFalse, toggle and set.useCounter — Numeric counter with increment, decrement and reset.useStep — 1-indexed step counter for wizards and steppers.useCountdown — Self-stopping countdown or count-up timer.useMap — Manage a Map as immutable React state.Every hook ships its own declarations — no @types/hookli needed. Data hooks are generic,
so inference flows through:
const { data } = useFetch<Product[]>("/api/products"); // data: Product[] | null
const debounced = useDebounce(query, 300); // debounced: typeof query
hookli is free and open source, built and maintained in the open. If it saves you time:
Every star and sponsorship genuinely helps keep this going. Thank you! 🙏
Contributions of any size are welcome — see CONTRIBUTING.md. In short:
each hook lives in its own folder under src/hooks/use-<name>/ (hook + colocated vitest test +
barrel), keep it SSR-safe, and make sure bash ralph/check.sh (typecheck + tests + build) is green.
ISC © Saif Mohamed
useDebounceValue — State whose debounced copy updates after a pause.useDebounceCallback — Debounces a callback, with cancel, flush and isPending.useInterval — Runs a callback on a fixed interval; pause by passing null.useTimeout — Runs a callback once after a delay; cancel by passing null.useIsomorphicLayoutEffect — useLayoutEffect on the client, useEffect on the server.useEventCallback — A stable callback that always calls the latest closure.useUnmount — Runs a cleanup function once, when the component unmounts.useIsClient — Reports false on the server and true after hydration.useIsMounted — A stable getter for whether the component is still mounted.useDocumentTitle — Keeps document.title in sync with a value, SSR-safe.useEventListener — Subscribe to a window, document or element event with cleanup.useClickOutside — Runs a callback on outside click.useMousePosition — Cursor coordinates within an element.useInfiniteScroll — Triggers loading near the scroll end.useExpandableText — Collapse long text by a character and/or line budget with a show-more toggle.useHover — Tracks whether the pointer is hovering an element.useIntersectionObserver — Observe an element's viewport intersection reactively.useResizeObserver — Measure an element's size reactively via ResizeObserver.useScrollLock — Lock and restore scrolling on the body or an element.useClickAnyWhere — Run a handler on every click anywhere in the document.useMediaQuery — Tracks whether a CSS media query currently matches.useScreen — Tracks window.screen, refreshing it on every resize.useWindowSize — Tracks the viewport's { width, height }, updated on resize.useCopyToClipboard — Copy text to the clipboard, tracking the last copied value.useScript — Load an external script and report its load status.useFetch — Declarative fetch with loading and error status.useGeoLocation — Browser geolocation state.