🚀 We’re actively developing new and unique custom hooks for React! Contribute on GitHub

Hooks

Complete reference for all hooks available in light-hooks package.

Light Hooks provides a collection of powerful, lightweight React hooks designed to solve common patterns in modern React applications. Each hook is carefully crafted to be performant, type-safe, and easy to use.

Available Hooks

State Management

  • useCountdown - Timer management with start/pause/reset controls
  • useLocalStorage - Persistent localStorage management with type safety

UI & Interaction

  • useClickOutside - Detect clicks outside specific elements
  • useIsMobile - Device detection for responsive behavior with ResizeObserver

Network & Communication

  • usePing - Network connectivity and latency monitoring

Getting Started

All hooks can be imported individually from the light-hooks package:

import { 
  useCountdown, 
  useLocalStorage, 
  useClickOutside, 
  useIsMobile, 
  usePing 
} from 'light-hooks';

Common Patterns

Timer with User Controls

function Timer() {
  const [timeLeft, { start, pause, reset, isRunning }] = useCountdown(60);
  
  return (
    <div>
      <div>Time: {timeLeft}s</div>
      <button onClick={isRunning ? pause : start}>
        {isRunning ? 'Pause' : 'Start'}
      </button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Responsive Modal with Click Outside

function Modal({ children, onClose }) {
  const modalRef = useRef(null);
  const isMobile = useIsMobile();
  
  useClickOutside(modalRef, () => {
    if (!isMobile) onClose(); // Only close on outside click for desktop
  });
  
  return (
    <div ref={modalRef} className={isMobile ? 'mobile-modal' : 'desktop-modal'}>
      {children}
    </div>
  );
}

Persistent User Preferences

function UserSettings() {
  const [preferences, setPreferences] = useLocalStorage('user-prefs', {
    theme: 'light',
    notifications: true,
    language: 'en'
  });
  
  const toggleTheme = () => {
    setPreferences(prev => ({ 
      ...prev, 
      theme: prev.theme === 'light' ? 'dark' : 'light' 
    }));
  };
  
  return (
    <div className={`app-${preferences.theme}`}>
      <button onClick={toggleTheme}>
        Switch to {preferences.theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
    </div>
  );
}

Network Status Indicator

function NetworkStatus() {
  const { isOnline, latency } = usePing('https://api.example.com/ping');
  
  return (
    <div className={`status ${isOnline ? 'online' : 'offline'}`}>
      {isOnline ? `Online (${latency}ms)` : 'Offline'}
    </div>
  );
}

TypeScript Support

All hooks include comprehensive TypeScript definitions:

// Types are automatically inferred
const [timeLeft, controls] = useCountdown(60);
// timeLeft: number
// controls: { start: () => void, pause: () => void, reset: () => void, isRunning: boolean }

const isMobile = useIsMobile();
// isMobile: boolean

const { isOnline, latency } = usePing('https://api.example.com');
// isOnline: boolean
// latency: number | null

Performance

Light Hooks are designed with performance in mind:

  • Tree Shakable: Import only the hooks you use
  • Zero Dependencies: No external dependencies to bloat your bundle
  • Optimized: Each hook uses efficient React patterns
  • Memoized: Internal optimizations prevent unnecessary re-renders

Ready to explore individual hooks? Click on any hook in the navigation to see detailed documentation, examples, and API reference.