@ihemehowell/react-utils

A lean, fully-typed React utility library — hooks, DOM helpers, and formatting utilities.

Features

• 🪝 10 production-ready hooks — debounce, throttle, storage, media queries, and more
• 🌐 DOM utilities — focus trapping, scrollbar width, SSR-safe env checks
• 🎨 Formatting helpers — currency (Naira/USD), relative time, slugify, file sizes
• 🔒 Fully typed — TypeScript first, zero any
• 🌲 Tree-shakeable — import only what you use
• ⚡ Dual ESM/CJS — works in Next.js, Vite, and CRA

Installation

npm install @ihemehowell/react-utils
# or
yarn add @ihemehowell/react-utils
# or
pnpm add @ihemehowell/react-utils

Usage

// Import everything
import { useDebounce, formatCurrency, isBrowser } from "@ihemehowell/react-utils";

// Or import from sub-paths (better tree-shaking)
import { useDebounce } from "@ihemehowell/react-utils/hooks";
import { formatCurrency } from "@ihemehowell/react-utils/format";
import { isBrowser } from "@ihemehowell/react-utils/dom";

Hooks

| Hook | Description | |------|-------------| | useDebounce | Debounce a value by a given delay | | useThrottle | Throttle a value to update at most once per interval | | useLocalStorage | SSR-safe localStorage with state sync | | useSessionStorage | SSR-safe sessionStorage with state sync | | useMediaQuery | Reactive CSS media query matching | | useClickOutside | Detect clicks outside a ref element | | useIntersectionObserver | Observe element visibility | | usePrevious | Track the previous value of state/props | | useToggle | Simple boolean toggle with helpers | | useCopyToClipboard | Copy text with success/error state |

DOM Utilities

| Utility | Description | |---------|-------------| | focusTrap | Trap keyboard focus within a container | | getScrollbarWidth | Get the browser scrollbar width in px | | isBrowser | SSR-safe check for browser environment |

Formatting

| Utility | Description | |---------|-------------| | formatCurrency | Format amounts with locale/currency (NGN, USD, etc.) | | formatRelativeTime | Human-readable relative time ("2 hours ago") | | truncate | Truncate a string with ellipsis | | slugify | Convert a string to a URL-friendly slug | | formatFileSize | Format bytes as "1.2 MB", "340 KB", etc. |

Contributing

PRs are welcome! Please run npm test before submitting.

License

MIT © Iheme Uchenna Howell