70 hooks · 7 components · one npm org

The React tools you keep rebuilding.Already built.

usefy is an open-source org shipping 77 production-grade packages — a full hooks library and a growing line of standalone components. Typed, SSR-safe, tree-shakeable.

$ npm install @usefy/hooks

Browse the toolbox Star on GitHub

Panel.tsx

import { useToggle } from "@usefy/use-toggle";

function Panel() {
  const { value, toggle } = useToggle(true);

  return (
    <button onClick={toggle}>
      {value ? "On" : "Off"}
    </button>
  );
}

import { fireConfetti } from "@usefy/confetti";

function ShipButton() {
  return (
    <button onClick={() => fireConfetti({ count: 140 })}>
      Ship it 🎉
    </button>
  );
}

import { SpotlightTour } from "@usefy/spotlight-tour";

const steps = [
  {
    target: "#toolbox",
    title: "The toolbox",
    content: "Every tool installs on its own.",
  },
];

<SpotlightTour steps={steps} controllerRef={tour} />

import {
  VirtualKeyboard,
  numericLayout,
} from "@usefy/virtual-keyboard";

function PinPad() {
  const [pin, setPin] = useState("");
  return (
    <VirtualKeyboard
      layouts={numericLayout}
      value={pin}
      onChange={setPin}
    />
  );
}

import { useToggle } from "@usefy/use-toggle";

function Panel() {
  const { value, toggle } = useToggle(true);

  return (
    <button onClick={toggle}>
      {value ? "On" : "Off"}
    </button>
  );
}

valuetrue

↑ a real @usefy/use-toggle — click it

packages: 77; packages
hooks: 70; hooks
components: 7; components

TypeScript-first
SSR-safe
Tree-shakeable
Zero-dependency core
React 18 & 19

the toolbox

One org. Many tools.

Not just hooks. Every package installs on its own and holds the same bar — hover a card and it demos itself.

@usefy/hooksThe hooks umbrella

70 React hooks for state, effects, events, observers, sensors, and async — one import, fully tree-shakeable, or each hook on its own.

Browse hooks →

@usefy/confettiCelebration engine

Canvas confetti and celebration engine for React — pooled particle physics, burst and continuous emit modes, and a zero-dependency headless core

View docs →

@usefy/spotlight-tourProduct tours

React onboarding tour with a tracking spotlight overlay, animated step transitions, headless hook, and enterprise a11y

View docs →

@usefy/signature-padSignature capture

Electronic signature pad for React — hand-written ink engine with Bézier smoothing and velocity/pressure-based variable stroke width, undo/redo history, and a zero-dependency headless core

View docs →

@usefy/memory-monitorMemory devtool

React component for real-time browser memory monitoring with slide-in panel UI

View docs →

@usefy/virtual-keyboardOn-screen input

React on-screen virtual keyboard with a declarative layout engine, headless hook, and enterprise a11y

View docs →

@usefy/network-indicatorConnectivity status

Drop-in React online/offline status banner — offline warning plus an auto-dismissing "back online" confirmation, zero-config and SSR-safe

View docs →

@usefy/scroll-progressReading progress

Drop-in React reading-progress bar — a thin fixed bar that fills as you scroll the page or any scrollable container, zero-config, accessible, and SSR-safe

View docs →

the hooks library

70 hooks, organized.

Browse all hooks →

State & data

Boolean, counter, list, map, set, and other state primitives.

useControllableState · useCounter · useDisclosure

Lifecycle & refs

Mount, unmount, previous value, stable refs, and effect timing.

useEventCallback · useInit · useIsClient

Timing & async

Debounce, throttle, interval, timeout, and async task lifecycles.

useAsync · useAsyncFn · useDebounce

Events & gestures

Clicks, keys, hover, long-press, and focus management.

useClickAnyWhere · useEventListener · useFocusTrap

Layout & observers

Intersection, resize, mutation observers, measure, and scroll.

useInfiniteScroll · useIntersectionObserver · useMeasure

Browser & device

Geolocation, network, media queries, clipboard, and color scheme.

useCopyToClipboard · useDarkMode · useDocumentTitle

Storage

localStorage, sessionStorage, and cookies as React state.

useCookie · useLocalStorage · useSessionStorage

engineering standards

Boring on purpose. Reliable by design.

Typed to the edges

Every package exports its return interface and helper types. Your editor knows the shape before you do.

SSR-safe by default

Isomorphic effects, hydration guards, and no window access at import. Drops into Next.js and Remix without a wrapper.

Install what you use

Each tool is its own package, versioned independently. Take one hook, one component, or the whole umbrella.

Stable references

Returned functions are memoized with useCallback, so they're safe as effect deps and child props.

Actually tested

Each package ships a real Vitest suite targeting 90%+ coverage — not a demo and a prayer.

Built in the open

MIT-licensed, changeset-released, and documented in Storybook. This very site runs on usefy packages.

What we won't build

usefy ships primitives, not platforms. Where a dedicated library already does it better, we point you there instead of shipping a worse clone.

Server state→ TanStack Query, SWR
Forms→ react-hook-form
Virtualized lists→ TanStack Virtual
Animation systems→ Motion
Global state→ Zustand, Jotai
React 19 built-ins→ React itself

Install one line. Delete a hundred.

Copying the command is worth celebrating — try it.

$ npm install @usefy/hooks

Explore the packages Try in Storybook Roadmap →