imbhargav5 / rooks

Collection of awesome react hooks 📚 Table of Contents • Quick Start • Why Rooks? • Popular Hooks • All Hooks by Category • Features • Installation • Usage • Contributors • License 🚀 Quick Start Get up and running in seconds: Import any hook and start using it: **📖 Browse all hooks** • **🎮 Try in CodeSandbox** ✨ Why Rooks? 🎯 Focused Each hook does one thing well 📦 Tree-shakeable Import only what you need 🔄 SSR Ready Works with Next.js, Remix, Gatsby 🧪 Well Tested 95%+ code coverage 📚 Documented Every hook has examples & demos ⚡ TypeScript First Full type safety out of the box 🎨 Modern Built for React 18+ with ESM 🤝 Community Driven 82 contributors and growing 🌟 Popular Hooks State Management useCounter Counter with increment/decrement useToggle Toggle between values useLocalstorageState useState with localStorage sync const { value, increment } = useCounter(0) const [on, toggle] = useToggle() const [user, setUser] = useLocalstorageState('user') Event Handling useKey Keyboard event handling useOutsideClick Detect clicks outside element useOnClickRef Click handler with ref Lifecycle & Effects useDidMount componentDidMount equivalent useWillUnmount componentWillUnmount equivalent useDebounce Debounce any value ** List of all hooks ** 🎬 Animation & Timing - 10 hooks • useAnimation - Animation hook for React • useEasing - A hook for creating controlled easing animations with start/stop/reset capabilities. • useIntervalWhen - Sets an interval immediately when a condition is true • useLockBodyScroll - This hook locks the scroll of the body element when is set to . • usePrefersReducedMotion - A React hook that returns true if the user has enabled the 'prefers-reduced-motion' setting in their system. • useRaf - A continuously running requestAnimationFrame hook for React • useResizeObserverRef - Resize Observer hook for React. • useSpring - Spring animation hook for React • useTimeoutWhen - Takes a callback and fires it when a condition is true • useTween - Tween animation hook for React 🌐 Browser APIs - 16 hooks • useBroadcastChannel - A React hook that provides a clean interface to the Broadcast Channel API for cross-tab/window communication • useClipboard - Clipboard read/write operations hook for React • useGeolocation - A hook to provide the geolocation info on client side. • useIdleDetectionApi - Hook to detect when user is idle using Idle Detection API with polyfill • useMediaRecorder - Audio/video recording from MediaStream • useNetworkInformation - Network connection quality detection hook for React • useNavigatorLanguage - Navigator Language hook for React. • useNotification - Browser notifications with permission handling • useOnline - Online status hook for React. • useOrientation - orientation hook for react • useScreenDetailsApi - Hook for multi-screen information and management using Screen Details API • useWebLocksApi - Hook for coordinating operations across tabs/workers with Web Locks API • useShare - Web Share API for native sharing • useSpeech - Speech synthesis hook for React • useFetch - Hook for fetching data from URLs with loading states, error handling, and automatic JSON parsing • useVibrate - Vibration API hook for React 🛠️ Development & Debugging - 1 hook • useRenderCount - Get the render count of a component 🚀 Events - 16 hooks • useDocumentEventListener - A react hook to an event listener to the document object • useDocumentVisibilityState - Returns the visibility state of the document. • useFocus - Handles focus events for the immediate target element. • useFocusWithin - Handles focus events for the target component. • useIsDroppingFiles - Check if any files are currently being dropped anywhere. Useful for highlighting drop areas. • useOnClickRef - Callback on click/tap events • useOnHoverRef - On hover callback hook • useOnLongHover - Fires a callback when an element is hovered for a while • useOnLongPress - Fire a callback on long press • useOnStartTyping - Fires a callback when the user starts typing outside editable fields (input, textarea, contenteditable). Supports filtering for a-z and 0-9 keys. • useOnWindowResize - A React hook for adding an event listener for window resize • useOnWindowScroll - A React hook for adding an event listener for window scroll • useOutsideClick - Outside click(for a ref) event as hook for React. • useOutsideClickRef - A hook that can track a click event outside a ref. Returns a callbackRef. • usePageLeave - Page leave detection with callbacks for beforeunload and visibility change • useWindowEventListener - Adds an event listener to window 📝 Form & File Handling - 3 hooks • useCheckboxInputState - Simple checkbox state management hook that provides a boolean state and props that can be spread directly onto a checkbox input element • useFileDropRef - Drop files easily • useFormState - Comprehensive form state management with validation ⌨️ Keyboard & Input - 5 hooks • useInput - Input hook for React. • useKey - keypress, keyup and keydown event handlers as hooks for react. • useKeyBindings - useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press. • useKeyRef - Very similar useKey but it returns a ref • useKeys - A hook which allows to setup callbacks when a combination of keys are pressed at the same time. 🔥 Lifecycle & Effects - 11 hooks • useAsyncEffect - A version of useEffect that accepts an async function • useDebouncedAsyncEffect - A version of useEffect that accepts an async function and debounces its execution based on dependency changes • useDebouncedEffect - A version of useEffect that debounces the effect execution based on dependency changes • useDeepCompareEffect - Deep compare dependencies instead of shallow for useEffect • useDidMount - componentDidMount hook for React • useDidUpdate - componentDidUpdate hook for react • useDocumentTitle - A hook to easily update document title wit…