usehooks.io

A comprehensive collection of production-ready React hooks

Build better React applications with our curated library of reusable hooks and powerful CLI tool

🌐 Website • 🚀 Quick Start • 📚 Hooks • 🛠️ CLI • 🤝 Contributing

✨ Features

🎯 30+ Production-Ready Hooks - Carefully crafted and battle-tested
🚀 Zero Configuration - Works out of the box with any React project
📦 CLI Tool - Add hooks to your project with a single command
🔍 Smart Search - Find hooks by name, description, or category
🛡️ Type Safe - Full TypeScript support with comprehensive type definitions
📱 Modern APIs - Leverages latest browser APIs and React patterns
🎨 Customizable - Flexible configuration options for every use case
📋 Well Documented - Comprehensive docs with examples and best practices

🚀 Quick Start

Using the CLI (Recommended)

# Initialize usehooks in your project
npx usehooks-cli@latest init

# Add a specific hook
npx usehooks-cli@latest add use-counter

# List all available hooks
npx usehooks-cli@latest list

# Get detailed information about a hook
npx usehooks-cli@latest info use-geolocation

📚 Available Hooks

Our collection includes 30+ hooks organized by category:

🏪 State Management

useArray - Helper methods for array state manipulation
useCounter - Counter state with increment, decrement, and reset
useLocalStorage - Sync state with localStorage
useSet - Comprehensive Set data structure management
useToggle - Boolean toggle state with convenient methods

📡 Sensors & Device APIs

useAudioRecorder - Audio recording with real-time analysis
useBarcodeDetector - Barcode and QR code detection
useDeviceOrientation - Device orientation data access
useGeolocation - User location with GPS tracking
useHover - Element hover detection with callbacks
useIsMobile - Mobile device detection using media queries and user agent
useIsTablet - Tablet device detection with comprehensive device identification
useMediaSession - Media notifications and control actions
useNetworkInformation - Network connection monitoring
useUserMedia - Camera and microphone access
useVibration - Device vibration control

🌐 Browser APIs

useBluetooth - Bluetooth Low Energy device interaction
useClipboard - Clipboard operations with state management
useContactPicker - Contact selection with user permission
useFullscreen - Fullscreen mode management
useStorage - Browser storage quotas and persistence
useWebShare - Native sharing mechanisms
useWindowSize - Window dimensions tracking

🔧 Utilities

useDebounce - Value debouncing for performance
useThrottle - Value throttling for rate limiting
usePrevious - Access to previous state/prop values
useIsMounted - Component mount status checking
useTimeout - Timeout management with controls

🔄 Lifecycle

useDeepCompareEffect - useEffect with deep equality check
useUpdateEffect - useEffect that skips initial render

🌍 Network

useFetch - HTTP requests with loading states and error handling

🔐 Authentication

useRoleGuard - Role-based access control 💡 Tip : Run npx usehooks-cli@latest list to see the complete list with descriptions and categories.

🛠️ CLI Tool

Our powerful CLI tool makes it easy to discover, install, and manage hooks in your projects.

Key Features

🚀 Quick Installation - Add hooks with a single command
🔍 Smart Search - Find hooks by name, description, or category
📋 Detailed Information - Get comprehensive details about any hook
🔄 Update Management - Keep hooks up-to-date
🗑️ Clean Removal - Remove hooks and dependencies safely
📱 Interactive Mode - User-friendly prompts and confirmations

Commands

# Initialize project
npx usehooks-cli@latest init

# Add hooks
npx usehooks-cli@latest add use-counter use-toggle

# List all hooks
npx usehooks-cli@latest list

# Get hook information
npx usehooks-cli@latest info use-geolocation

# Update hooks
npx usehooks-cli@latest update --all

# Remove hooks
npx usehooks-cli@latest remove use-counter

🏗️ Project Structure

This monorepo contains several packages:

usehooks.io/
├── packages/
│   ├── hooks/              # 🪝 Core hooks library
│   ├── usehooks-cli/       # 🛠️ CLI tool for hook management
│   ├── ui/                 # 🎨 Shared UI components
│   ├── eslint-config/      # 📏 ESLint configuration
│   └── typescript-config/  # 📝 TypeScript configuration
├── apps/
    └── www/               # 🌐 Documentation website

🤝 Contributing

We welcome contributions! Here's how you can help:

Adding a New Hook

Fork and clone the repository
Create a new hook directory in packages/hooks/src/

Follow the hook template :

use-your-hook/
├── index.ts      # Hook implementation
├── meta.json     # Hook metadata
└── doc.json      # Documentation

Add comprehensive tests
Update the index.json file
Submit a pull request

Guidelines

✅ TypeScript first - All hooks must be written in TypeScript
✅ Comprehensive tests - Include unit tests and edge cases
✅ Clear documentation - Provide examples and use cases
✅ Performance focused - Optimize for minimal re-renders
✅ Browser compatibility - Support modern browsers
✅ Accessibility - Consider a11y implications

📖 Documentation

🌐 Website : usehooks.io
📚 Hook Documentation : Each hook includes comprehensive docs with examples
🛠️ CLI Documentation : Run npx usehooks-cli@latest --help
🎯 Examples : Check the /examples directory in each hook

🔧 Requirements

Node.js : 20 or higher
React : 18 or higher
TypeScript : 5.8 or higher (recommended)

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

small-lab-io/usehooks.io