![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n ๐ช A collection of production-ready React hooks for modern applications\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/usefy.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/usefy.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/usefy?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/usefy.svg?style=flat-square&color=007acc\")
\n \n
\n Installation โข\n Packages โข\n Quick Start โข\n Features\n
\n\n\n \n ๐ View Storybook Demo\n \n
\n\n---\n\n> โ ๏ธ **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.\n>\n> ๐ง **Actively Developing**: New hooks are being added regularly. Stay tuned for more utilities!\n\n---\n\n## Overview\n\n**usefy** is a collection of production-ready custom hooks designed for modern React applications. All hooks are written in TypeScript, providing complete type safety, comprehensive testing, and minimal bundle size.\n\n### โจ Why usefy?\n\n- **๐ Zero Dependencies** โ Pure React implementation with no external dependencies\n- **๐ฆ Tree Shakeable** โ Import only the hooks you need to optimize bundle size\n- **๐ท TypeScript First** โ Complete type safety with full autocomplete support\n- **โก SSR Compatible** โ Works seamlessly with Next.js, Remix, and other SSR frameworks\n- **๐งช Well Tested** โ High test coverage ensures reliability and stability\n- **๐ Well Documented** โ Detailed documentation with practical examples\n- **๐จ Interactive Demos** โ Try all hooks in action with our Storybook playground\n\n---\n\n## Installation\n\n### All-in-One Package\n\nInstall all hooks at once:\n\n```bash\n# npm\nnpm install @usefy/usefy\n\n# yarn\nyarn add @usefy/usefy\n\n# pnpm\npnpm add @usefy/usefy\n```\n\n### Individual Packages\n\nYou can also install only the hooks you need:\n\n```bash\n# Example: Install only use-toggle\npnpm add @usefy/use-toggle\n\n# Install multiple packages\npnpm add @usefy/use-debounce @usefy/use-local-storage\n```\n\n### Peer Dependencies\n\nAll packages require React 18 or 19:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n }\n}\n```\n\n---\n\n## Packages\n\n### ๐ฆ Available Hooks\n\n| Hook | Description | npm | Coverage |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |\n| @usefy/use-toggle | Boolean state management with toggle, setTrue, setFalse |![\"npm](\"https://img.shields.io/npm/v/@usefy/use-toggle.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-counter | Counter state with increment, decrement, reset | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-counter.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-debounce | Value debouncing with leading/trailing edge | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-debounce.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-debounce-callback | Debounced callbacks with cancel/flush/pending | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-debounce-callback.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-throttle | Value throttling for rate-limiting updates | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-throttle.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-throttle-callback | Throttled callbacks with cancel/flush/pending | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-throttle-callback.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-local-storage | localStorage persistence with cross-tab sync | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-local-storage.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-session-storage | sessionStorage persistence for tab lifetime | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-session-storage.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-click-any-where | Document-wide click event detection | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-click-any-where.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-copy-to-clipboard | Clipboard copy with fallback support | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-copy-to-clipboard.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-event-listener | DOM event listener with auto cleanup | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-event-listener.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-on-click-outside | Outside click detection for modals/dropdowns | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-on-click-outside.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-unmount | Execute callback on component unmount | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-unmount.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-init | One-time initialization with async, retry, timeout | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-init.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-timer | Countdown timer with drift compensation and formats | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-timer.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-geolocation | Device geolocation with real-time tracking and distance | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-geolocation.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-intersection-observer | Element visibility detection with Intersection Observer | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-intersection-observer.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-signal | Event-driven communication between components | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-signal.svg?style=flat-square&color=007acc\")
|  |\n| @usefy/use-memory-monitor | Real-time browser memory monitoring with leak detection | ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-memory-monitor.svg?style=flat-square&color=007acc\")
|  |\n\n---\n\n## Quick Start\n\n### Using the All-in-One Package\n\n```tsx\nimport {\n useToggle,\n useCounter,\n useDebounce,\n useLocalStorage,\n useCopyToClipboard,\n useEventListener,\n useOnClickOutside,\n useIntersectionObserver,\n useSignal,\n useUnmount,\n useInit,\n} from \"@usefy/usefy\";\n\nfunction App() {\n // Boolean state management\n const { value: isOpen, toggle, setFalse: close } = useToggle(false);\n\n // Counter with controls\n const { count, increment, decrement, reset } = useCounter(0);\n\n // Debounced search\n const [query, setQuery] = useState(\"\");\n const debouncedQuery = useDebounce(query, 300);\n\n // Persistent theme preference\n const [theme, setTheme] = useLocalStorage(\"theme\", \"light\");\n\n // Copy functionality\n const [copiedText, copy] = useCopyToClipboard();\n\n // Lazy loading image\n const { ref: imageRef, inView } = useIntersectionObserver({\n triggerOnce: true,\n rootMargin: \"50px\",\n });\n\n return (\n ![\"Lazy](\"large-image.jpg\")
}\n \n Built with โค๏ธ by the usefy team\n
\n\n\n \n ![\"GitHub](\"https://img.shields.io/github/stars/mirunamu00/usefy?style=social\")