Skip to Content

Hooks

@rhinolabs/react-hooks is a collection of 30+ production-ready React hooks that solve common web development challenges. These hooks help you manage state, handle side effects, and implement complex functionality with ease.

Installation

# Using npm npm install @rhinolabs/react-hooks # Using pnpm pnpm add @rhinolabs/react-hooks # Using yarn yarn add @rhinolabs/react-hooks

Available Hooks

State & Storage

  • useArray - Array manipulation with built-in CRUD operations
  • useLocalStorage - Persistent state in localStorage
  • useToggle - Boolean state management
  • usePrevious - Access previous state values
  • useInput - Form input state handling

Performance & Optimization

  • useDebounce - Delay state updates for performance
  • useFirstRender - First render detection
  • useScript - Dynamic script loading
  • useEventListener - Optimized event handling

Browser & DOM

  • useTitle - Document title management
  • useFavicon - Dynamic favicon updates
  • useWindowSize - Window dimensions tracking
  • useScroll - Scroll position monitoring
  • useOnScreen - Intersection observation
  • useOutsideClick - Click outside detection
  • useKeyPress - Keyboard event handling

Media & Files

  • useAudio - Audio playback control
  • useVideo - Video playback control
  • useDownload - File download handling
  • useClipboard - Copy/paste operations

Network & Data

  • useFetch - Data fetching with states
  • useAsync - Async operation handling
  • useSearchParams - URL parameter management
  • useOffline - Network status detection
  • useNavigatorShare - Web Share API

Device & Sensors

  • useGeolocation - Location tracking
  • useIsTouchDevice - Touch capability detection
  • useBattery - Battery status monitoring
  • useLang - Language detection
  • useFirstVisit - First visit detection

Time & Timers

  • useCountdown - Countdown timer
  • useCountup - Count-up timer
  • useStopwatch - Stopwatch functionality
  • useTimer - General purpose timer

Utilities

  • useRandomColor - Random color generation

Benefits

  • Type Safety: Full TypeScript support with comprehensive type definitions
  • Tree Shakeable: Only import what you need, keeping your bundle size minimal
  • Well Tested: Thoroughly tested hooks for production use
  • Zero Dependencies: No external runtime dependencies
  • Easy to Use: Simple, consistent API across all hooks
Last updated on