Collection of React Hooks
Find and copy expertly crafted custom hooks with clear documentation, usage examples, and tips for optimization.
useReactHook is a comprehensive collection of custom React hooks designed to simplify common development patterns and enhance your React applications. Each hook comes with detailed documentation, practical examples, and usage statistics to help you make informed decisions.
- Curated Hook Collection: Expertly crafted custom React hooks for common use cases
- Comprehensive Documentation: Each hook includes detailed documentation with API references and examples
- Usage Statistics: Track hook popularity, copy counts, and community feedback
- Search Functionality: Quickly find the hooks you need with built-in search
- Dark Mode: Comfortable viewing experience with theme toggle
- Responsive Design: Fully responsive interface that works on all devices
- Type-Safe: Written in TypeScript for better developer experience
- Copy to Clipboard: One-click copying of hook implementations
- useClickOutside: Trigger functions when clicks occur outside a specified element
- useClickInside: Detect clicks inside a specified element
- useHoverOutside: Handle hover events outside an element
- useHoverInside: Handle hover events inside an element
- useCopyToClipboard: Simplified clipboard operations with feedback
- useHasMounted: Check if a component has mounted (SSR-safe)
- useKeyboardCommands: Create keyboard shortcuts and command interfaces
- Next.js 14: React framework with App Router
- React 18: Latest React features and optimizations
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first CSS framework
- Radix UI: Accessible component primitives
- Lucide React: Beautiful icon library
- next-themes: Dark mode support
- Drizzle ORM: Type-safe SQL ORM
- MySQL: Relational database for storing hook statistics
- Velite: Content processing for MDX files
- MDX: Enhanced markdown for documentation
- rehype-pretty-code: Beautiful code syntax highlighting
- rehype-slug: Auto-generated heading IDs
- rehype-autolink-headings: Clickable heading anchors
- ESLint: Code linting
- Prettier: Code formatting
- Husky: Git hooks
- lint-staged: Run linters on staged files
- Node.js 20 or higher
- npm 10 or higher
- MySQL database
- Clone the repository:
git clone https://github.com/project-kt/usereacthook.git
cd usereacthook- Install dependencies:
npm install- Set up environment variables:
cp .env.example .envEdit .env and configure your database connection:
DATABASE_URL="mysql://user:password@localhost:3306/database"- Push the database schema:
npm run db:push- Start the development server:
npm run devOpen http://localhost:3000 to view the application.
If you need to start a local MySQL database, you can use the provided script:
./start-database.shTo view and manage your database:
npm run db:studiousereacthook/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── _components/ # Homepage components
│ │ ├── api/ # API routes for statistics
│ │ ├── contact/ # Contact page
│ │ └── docs/ # Documentation pages
│ ├── components/ # Reusable components
│ │ ├── hooks/ # Hook utilities
│ │ └── ui/ # UI components (Radix)
│ ├── config/ # Site configuration
│ ├── content/ # MDX documentation files
│ │ └── docs/ # Hook documentation
│ ├── lib/ # Utility functions
│ └── server/ # Server-side code
│ └── db/ # Database schema and queries
├── public/ # Static assets
└── velite.config.ts # Content processing config
npm run dev- Start development servernpm run build- Build for productionnpm start- Start production server
npm run db:push- Push schema changes to databasenpm run db:studio- Open Drizzle Studio
npm run lint- Run ESLintnpm run lint:fix- Fix ESLint errorsnpm run format- Format code with Prettiernpm run format:check- Check code formatting
- Create a new MDX file in
src/content/docs/:
---
title: useYourHook
description: Brief description of what the hook does
published: true
new: true # Mark as new (optional)
---
## Overview
Detailed explanation of the hook...
## Code
\`\`\`tsx
// Your hook implementation
\`\`\`
## API
### Parameters
- param1: Description
## Examples
\`\`\`tsx
// Usage example
\`\`\`- The hook will automatically appear in the documentation and search index
The application tracks the following metrics for each hook:
- Click Count: Number of times the hook page is viewed
- Copy Count: Number of times the code is copied
- Useful Count: Community feedback on usefulness
- Useless Count: Community feedback on lack of usefulness
The project includes Netlify configuration and is optimized for deployment:
- Push your code to GitHub
- Connect your repository to Netlify
- Configure environment variables in Netlify dashboard
- Deploy
npm run buildDeploy to Vercel with the Next.js preset.
Build and run with Docker:
docker build -t usereacthook .
docker run -p 3000:3000 usereacthookContributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-hook - Add your hook documentation in
src/content/docs/ - Ensure your code follows the linting rules:
npm run lint:fix - Format your code:
npm run format - Commit your changes:
git commit -m "Add useNewHook" - Push to your fork:
git push origin feature/new-hook - Open a Pull Request
- Follow the existing hook documentation format
- Include comprehensive examples and API documentation
- Write TypeScript with proper type definitions
- Test your hooks thoroughly
- Ensure accessibility best practices
This project is open source and available under the MIT License.
Built with the T3 Stack:
UI Components from Radix UI
- Visit usereacthook.com
- Open an issue on GitHub
- Reach out via the Contact Page
Made with ❤️ by the useReactHook team