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)
\`\`\`bash
# 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
\`\`\`bash
# 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
1. Fork and clone the repository
2. Create a new hook directory in packages/hooks/src/
3. Follow the hook template :
\`\`\`
use-your-hook/
├── index.ts # Hook implementation
├── meta.json # Hook metadata
└── doc.json # Documentation
\`\`\`
4. Add comprehensive tests
5. Update the index.json file
6. 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](LICENSE.md) file for details.