A lightweight React hooks library built for performance and developer experience.
npm install light-hookslight-hooks delivers production-ready React hooks that prioritize performance without sacrificing developer experience. Each hook is carefully optimized using modern browser APIs and best practices.
- 🪶 Ultra-lightweight — Tree-shakable with minimal runtime overhead
- ⚡ Performance-first — Uses ResizeObserver, stable refs, and optimized event handling
- 🎯 TypeScript native — Written in TypeScript with complete type safety
- 🔧 SSR compatible — Zero hydration mismatches, works everywhere
- 🎨 Developer friendly — Intuitive APIs with comprehensive documentation
import { useLocalStorage, useIsMobile } from 'light-hooks'
export default function App() {
const [count, setCount] = useLocalStorage('counter', 0)
const isMobile = useIsMobile()
return (
<div>
<h1>{isMobile ? '📱' : '💻'} Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
)
}useIsMobile — Mobile device detection with ResizeObserver for zero-cost updates.
useClickOutside — Handle clicks outside elements. Perfect for modals and dropdowns.
useCountdown — Flexible countdown timers with start/pause/reset controls.
useLocalStorage — Persistent state with automatic serialization and cross-tab sync.
usePing — Network connectivity monitoring with real-time latency measurement.
useHotKey — Keyboard shortcuts with modifier keys and conflict-free bindings.
useEvent — Advanced event handling with delegation and performance optimization.
usePermission — Browser permissions management with unified API for camera, microphone, notifications.
useScroll — Advanced scroll monitoring with direction tracking, velocity, and scroll locking controls.
useDebounce — Delay value updates until activity stops. Essential for search inputs and API calls.
useThrottle — Rate-limit function execution at regular intervals. Perfect for scroll and resize handlers.
useGeolocation — User location access with permissions, error handling, and position watching.
useIdle — User inactivity detection with configurable timeout and cross-tab synchronization.
useFetch — Complete data fetching with loading states, caching, retries, and request cancellation.
useToggle — Simple boolean state management with toggle, setTrue, setFalse controls.
useCopyToClipboard — Copy text to clipboard with modern API, fallback support, and user feedback.
usePolling — Data polling with interval and long polling support, retry logic, and comprehensive error handling.
useWebSocket — Real-time data streaming with automatic reconnection and message handling.
Visit lighthooks.com for detailed documentation, examples, and API references.
We welcome contributions! Check out our contributing guide to get started.
Thanks to these amazing people who have contributed to light-hooks:
div02-afk New hooks implementation |
MIT © Gourav2609