Custom Hooks
Collection of custom React hooks for common functionality across the application.
useClipboard
Utility
Usage
Hook for copying text to clipboard with status feedback.
TYPESCRIPT
useKeyPress
Keyboard
Usage
Hook for handling keyboard shortcuts and key press events.
TYPESCRIPT
Automatically ignores key events in input fields and contenteditable elements.
useIsMobile
Responsive
Usage
Hook for detecting mobile viewport (below 768px).
TYPESCRIPT
useOS
Platform
Usage
Hook for detecting the user's operating system.
TYPESCRIPT
useThemeToggle
Theme
Usage
Hook for managing theme toggling functionality.
TYPESCRIPT
useUpgradeModal
UI
Usage
Hook for managing upgrade modal state with URL query parameters.
TYPESCRIPT
Key Features
⚛️
React Integration
Seamless integration with React's lifecycle and state management
🔄
Type Safety
Full TypeScript support with proper type definitions
📱
Cross-Platform
Works across different devices and environments
🧩
Composable
Can be combined with other hooks for complex functionality
Best Practices
- 1All hooks are client-side only
- 2Use with appropriate error boundaries
- 3Consider SSR implications when using browser APIs
- 4Follow React hooks rules and conventions
Remember to add
"use client" directive at the top of files that use these hooks, as they rely on browser APIs.