Production-ready React utilities for modern applications

Website • Ecosystem • Quick Start • Why usefy? • Packages

View Storybook Demo

✅ Stable & production-ready. usefy follows semantic versioning — breaking changes only ever land in a new major version.

usefy is a monorepo of production-ready React packages published under @usefy/*. Each package under packages/ stands on its own — install exactly what you need. Some are umbrellas that bundle a whole family (@usefy/hooks); others are single-purpose packages (@usefy/memory-monitor). New packages — another umbrella, or a standalone UI package — simply drop in at the same level.

A collection of 70+ lightweight React hooks for common patterns like state management, timing, storage, events, and more.

pnpm add @usefy/hooks

import { useToggle, useDebounce, useLocalStorage } from "@usefy/hooks";

function App() {
  const { value: isOpen, toggle } = useToggle(false);
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 300);
  const [theme, setTheme] = useLocalStorage("theme", "light");

  // ...
}

Highlights:

• useToggle, useCounter, useObjectState — State management (boolean, counter, object patch/merge)
• useRafState — useState that batches updates to requestAnimationFrame (one commit per frame)
• useDebounce, useThrottle, useTimer, useTimeout, useInterval — Timing utilities
• useLocalStorage, useSessionStorage, useCookie — Persistent storage (localStorage, sessionStorage, cookies)
• useEventListener, useOnClickOutside, useHover, useLongPress, useScrollLock, useFocusTrap, useFocusWithin — DOM events, gestures & modal accessibility
• useInfiniteScroll — Sentinel-driven infinite loading built on IntersectionObserver
• usePagination — Headless pagination state (page count, slice-ready range, ellipsis-aware pager model)
• useKeyPress, useHotkeys — Keyboard shortcuts, combinations, and sequences
• useMap, useSet, useList, useQueue, useStack — Map / Set / array / FIFO queue / LIFO stack data structure state management
• useSelection — Multi/single selection state for lists and tables (Set-based, checkbox-ready)
• useHistoryState — Undo/redo state history with time-travel
• useStep — Multi-step navigation for wizards, forms, and carousels
• useIntersectionObserver, useResizeObserver, useMutationObserver, useMeasure, useScrollPosition, useGeolocation, useWindowSize, useNetworkState, usePageVisibility, useIdle, usePermission, useUserMedia, useScript — Browser APIs & element measurement
• useAsyncFn, useAsync, usePolling — Async lifecycle tracking (manual-trigger / auto-run / interval polling with backoff and AbortController cancellation)
• useSignal — Event-driven communication
• useMemoryMonitor — Memory monitoring hook
• useIsClient, useIsomorphicLayoutEffect, usePrevious, useLatest, useEventCallback, useUpdateEffect, useMount, useIsFirstRender — SSR & lifecycle utilities
• useMediaQuery, usePreferredColorScheme, useReducedMotion, useDarkMode, useDocumentTitle — Responsive, theme & accessibility
• useControllableState, useMergedRefs, useDisclosure — Component-library primitives (controllable state, ref merging, open/close state)

View full documentation →

Real-time memory monitoring panel with leak detection, snapshots, and reports (built on @usefy/use-memory-monitor).

pnpm add @usefy/memory-monitor

import { MemoryMonitor } from "@usefy/memory-monitor";

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <MemoryMonitor
        mode="development"
        position="right"
        onLeakDetected={(analysis) => console.warn("Leak:", analysis)}
      />
    </div>
  );
}

View full documentation →

On-screen (virtual) keyboard for kiosks, PIN pads, and D-pad UIs — a declarative layout engine, a headless useVirtualKeyboard hook, and enterprise a11y.

pnpm add @usefy/virtual-keyboard

import { useRef } from "react";
import { VirtualKeyboard, qwertyLayout } from "@usefy/virtual-keyboard";

function Search() {
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <>
      <input ref={inputRef} placeholder="Search…" />
      <VirtualKeyboard inputRef={inputRef} layouts={qwertyLayout} submitOnEnter />
    </>
  );
}

View full documentation →

Drop-in online/offline status banner — renders nothing while online, warns when the connection drops, and flashes an auto-dismissing "Back online" confirmation on reconnect (built on @usefy/use-network-state).

pnpm add @usefy/network-indicator

import { NetworkIndicator } from "@usefy/network-indicator";

function App() {
  return (
    <>
      <YourApp />
      {/* Mount once at the root — zero-config, SSR-safe */}
      <NetworkIndicator position="top" onlineDuration={3000} />
    </>
  );
}

View full documentation →

Drop-in reading-progress bar — a thin fixed bar pinned to the top (or bottom) of the viewport that fills as you scroll the page or any scrollable container (built on @usefy/use-scroll-position).

pnpm add @usefy/scroll-progress

import { ScrollProgress } from "@usefy/scroll-progress";

function App() {
  return (
    <>
      {/* Mount once — zero-config, accessible, SSR-safe */}
      <ScrollProgress color="#8b5cf6" height={4} />
      <YourApp />
    </>
  );
}

View full documentation →

Guided onboarding tours — dims the page, cuts an animated spotlight hole around each step's target, and shows a step tooltip beside it. Interaction gates, missing-target policies, tourId persistence, a pulsing beacon, full keyboard + screen-reader support, and the whole state machine also available headless.

pnpm add @usefy/spotlight-tour

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

function App() {
  return (
    <SpotlightTour
      defaultOpen
      tourId="app-onboarding"
      steps={[
        { title: "Welcome! 👋", content: "Let's take a quick look around." },
        { target: "#search", title: "Search", content: "Find anything here." },
        { target: "#create", content: "Click to create your first project.",
          advanceOn: { event: "click" } }, // gated step
      ]}
    />
  );
}

View full documentation →

Canvas confetti & celebration effects — bursts, fireworks, cannons, snow — driven by a hand-written, zero-dependency particle engine (gravity, drag, 3D tumble, object pooling, provably-idle rAF loop). One-liner fireConfetti(), a <Confetti /> overlay + useConfetti() hook, presets, emoji/image/Path2D shapes, and the whole engine also available headless.

pnpm add @usefy/confetti

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

function ShipItButton() {
  return (
    <button onClick={() => fireConfetti({ origin: { y: 0.8 }, spread: 70 })}>
      🚀 Ship it
    </button>
  );
}

View full documentation →

Electronic signature input — draw with mouse, finger, or stylus and export a trimmed PNG, true-vector SVG, or replayable JSON. Hand-written ink engine: Bézier smoothing + velocity/pressure-based variable stroke width, stroke-level undo/redo, on-canvas "sign here" guideline (never exported), read-only restore, and the whole engine also available headless. Zero dependencies.

pnpm add @usefy/signature-pad

import { SignaturePad } from "@usefy/signature-pad";

function ConsentForm() {
  return (
    <div style={{ height: 200 }}>
      <SignaturePad guideline onChange={({ isEmpty }) => setSigned(!isEmpty)} />
    </div>
  );
}

View full documentation →

Text diff viewer — render the difference between two texts side-by-side or unified, with line numbers, word-level highlighting inside changed lines, and unchanged regions collapsed behind expandable context. Hand-written linear-space Myers engine (zero deps), row virtualization for 20k-line diffs, an explicit cost guard, a bring-your-own-highlighter seam, real table accessibility, and the whole engine also available headless.

pnpm add @usefy/diff-viewer

import { DiffViewer } from "@usefy/diff-viewer";

function Review({ before, after }) {
  return <DiffViewer oldText={before} newText={after} view="split" />;
}

View full documentation →

QR code generator — a hand-written ISO/IEC 18004 encoder (Reed–Solomon over GF(256), optimal mode segmentation, penalty-scored mask selection) feeding SVG, canvas and PNG from one geometry pipeline. Module and finder-eye shapes, gradients, and logo embedding with logoSafety() measuring occlusion against what the error-correction level can actually recover. The headless entry ships no "use client" and no React, so a server component renders a code with zero client JavaScript. Zero dependencies.

pnpm add @usefy/qr-code

import { QRCode } from "@usefy/qr-code";

function ShareLink() {
  return <QRCode value="https://usefy.dev" size={200} level="Q" title="Open usefy.dev" />;
}

View full documentation →

QR code scanner — the platform's BarcodeDetector where it exists, and a hand-written ISO/IEC 18004 decoder where it does not: adaptive binarization, sub-pixel finder detection, four-point perspective correction, Reed–Solomon error correction, ECI and Kanji. Camera and still image, so a desktop without a webcam is a first-class case rather than an error state. Corners come back in source pixels with a helper that maps them through object-fit, and an optional ./worker entry moves decoding off the main thread. The counterpart to @usefy/qr-code, sharing its ISO tables so the two cannot disagree.

pnpm add @usefy/qr-scanner

import { QRScanner } from "@usefy/qr-scanner";

function CheckIn() {
  // A QR payload is untrusted input — validate before acting on it.
  return <QRScanner onScan={(result) => console.log(result.text)} />;
}

View full documentation →

All packages require React 18 or 19:

{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0"
  }
}

Some packages may have additional peer dependencies (check individual package docs).

• TypeScript First — Complete type safety with full autocomplete support
• SSR Compatible — Works seamlessly with Next.js, Remix, and other SSR frameworks
• Tree Shakeable — Import only what you need to optimize bundle size
• Well Tested — High test coverage ensures reliability and stability
• Well Documented — Detailed documentation with practical examples
• Interactive Demos — Try everything in our Storybook playground

Also ships a @usefy/virtual-keyboard/headless entry (hook + engine + types, no CSS), an opt-in @usefy/virtual-keyboard/hangul entry (hangulComposer + hangulLayout — Korean 두벌식 IME), and an opt-in @usefy/virtual-keyboard/styles.css.

Also ships a @usefy/spotlight-tour/headless entry (hook + engine + types, no CSS) and an opt-in @usefy/spotlight-tour/styles.css.

Also ships a zero-React @usefy/confetti/headless entry (engine + shapes + presets + types, zero dependencies).

Also ships a zero-React @usefy/signature-pad/headless entry (engine + ink math + types, zero dependencies).

Also ships a zero-React @usefy/diff-viewer/headless entry (engine + tokenizer + hunks + types, zero dependencies) and a @usefy/diff-viewer/styles.css export (styles otherwise inject at runtime).

Also ships a zero-React, no-"use client" @usefy/qr-code/headless entry (encoder + renderers + types, zero dependencies) that a React Server Component can import directly.

Also ships a zero-React, no-"use client" @usefy/qr-scanner/headless entry and a @usefy/qr-scanner/worker entry, both importable from a server component or a Web Worker.

We welcome contributions! Please see our Contributing Guide for details.

# Clone the repo
git clone https://github.com/mirunamu00/usefy.git

# Install dependencies
pnpm install

# Run tests
pnpm test

# Start Storybook
pnpm storybook

• npm Organization
• Storybook Demo
• Coverage Report
• Issue Tracker

MIT © mirunamu

_{Built with care by the usefy team}