usefy

Production-ready React utilities for modern applications

Ecosystem • Quick Start • Why usefy? • Packages

View Storybook Demo

---

Pre-release Notice: This project is currently in version 0.x.x (alpha/beta stage). APIs may change between minor versions. While fully functional and tested, please use with caution in production environments.

---

Overview

usefy is a monorepo containing production-ready React utilities. The ecosystem is divided into two main categories:

Category	Package	Description
Hooks	@usefy/hooks	Lightweight React hooks for common patterns
Kits	@usefy/kits	Feature-complete UI components with built-in functionality

---

Ecosystem

@usefy/hooks — React Hooks Collection

A collection of 20+ 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 — State management
• useDebounce, useThrottle, useTimer — Timing utilities
• useLocalStorage, useSessionStorage — Persistent storage
• useEventListener, useOnClickOutside, useHover — DOM events
• useKeyPress — Keyboard shortcuts and combinations
• useMap, useSet, useList, useQueue — Map / Set / array / FIFO queue data structure state management
• useHistoryState — Undo/redo state history with time-travel
• useIntersectionObserver, useGeolocation — Browser APIs
• useSignal — Event-driven communication
• useMemoryMonitor — Memory monitoring hook

View full documentation →

---

@usefy/kits — Feature Kits Collection

A collection of feature-complete UI components with built-in state management, styling, and functionality. Drop them into your app with minimal configuration.

pnpm add @usefy/kits

import { MemoryMonitor } from "@usefy/kits";

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

Available Kits:

• MemoryMonitor — Real-time memory monitoring panel (built on @usefy/use-memory-monitor)

View full documentation →

---

Quick Start

Choose Your Package

Need	Install	Import
All hooks	pnpm add @usefy/hooks	import { useToggle } from "@usefy/hooks"
All kits	pnpm add @usefy/kits	import { MemoryMonitor } from "@usefy/kits"
Single hook	pnpm add @usefy/use-toggle	import { useToggle } from "@usefy/use-toggle"
Single kit	pnpm add @usefy/memory-monitor	import { MemoryMonitor } from "@usefy/memory-monitor"

Peer Dependencies

All packages require React 18 or 19:

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

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

---

Why usefy?

Hooks Zero dependencies Minimal bundle size Building blocks for custom UI Logic only, no styling

Kits Complete solutions Built-in UI with customization Feature-rich components Ready to use out of the box

Common Features

• 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

---

Packages

Hooks (@usefy/hooks)

Hook	Description
useToggle	Boolean state with toggle, setTrue, setFalse
useCounter	Counter with increment, decrement, reset
useDebounce	Value debouncing with leading/trailing edge
useDebounceCallback	Debounced callbacks with cancel/flush
useThrottle	Value throttling for rate-limiting
useThrottleCallback	Throttled callbacks with cancel/flush
useTimer	Countdown timer with drift compensation
useLocalStorage	localStorage with cross-tab sync
useSessionStorage	sessionStorage persistence
useEventListener	DOM events with auto cleanup
useOnClickOutside	Outside click detection
useClickAnyWhere	Global click detection
useCopyToClipboard	Clipboard operations
useGeolocation	Device geolocation with tracking
useIntersectionObserver	Element visibility detection
useHover	Element hover detection with delay
useKeyPress	Keyboard key, shortcut, and combination detection
useMap	Map data structure state with immutable updates
useSet	Set data structure state with immutable updates
useList	Array state with push/filter/sort/insertAt/updateAt
useQueue	FIFO queue state with enqueue/dequeue and immutable updates
useHistoryState	Undo/redo state history with time-travel
useSignal	Event-driven communication
useUnmount	Unmount callback
useInit	One-time initialization
useMemoryMonitor	Browser memory monitoring

Kits (@usefy/kits)

Kit	Description
MemoryMonitor	Real-time memory monitoring panel with leak detection, snapshots, and reports

---

Browser Support

Browser	Version
Chrome	66+
Firefox	63+
Safari	13.1+
Edge	79+

---

Contributing

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

---

Related Links

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

---

License

MIT mirunamu

---

_{Built with care by the usefy team}