A library of
better React hooks
Production-ready, server-safe React hooks for high-performance applications. TypeScript-first, beautifully typed, and documentation-rich.
Features
Lightweight
react-hooks-ts is a tiny library without any dependencies, ensuring a lean and efficient solution.
Type-Safe
Catch compile-time errors with ease and unlock strong typing benefits across your stack.
Tree-Shakable
Eliminating unused code and delivering leaner bundles for lightning-fast load times.
Easy to Use
Get started in no time! Explore comprehensive documentation and rich interactive examples.
Developer-Friendly
Simplify development with an intuitive and powerful API. Don't repeat yourself.
Open-Source
Join the vibrant community! Collaborate, contribute, and unlock endless possibilities together.
Pricing
Just kidding! react-hooks-ts is free and open-source.
You can still make your contribution!
Explore The Collection
Utilities
useCookie
Simple hook to manage browser cookies.
useEyeDropper
Pick colors from the entire screen using the modern EyeDropper API.
useKeyboardShortcut
Declare and manage keyboard shortcuts effortlessly.
useLockedBody
Prevent body scrolling when a modal or overlay is active.
useOs
Detect the user's operating system for adaptive UI experiences.
useCopyToClipboard
A React hook to robustly copy text to the clipboard with status feedback.
useCountdown
A hook to manage countdown timers.
useDocumentTitle
A hook to dynamically update the document title.
useEventListener
A hook to manage event listeners on window, document, or elements.
useFavicon
A hook to dynamically update the page favicon.
useFetch
A React hook for data fetching with loading, error states, and refetch capability.
useInterval
A declarative React hook for setInterval with pause/resume support.
useScript
A hook to load external scripts dynamically.
useSpeech
A hook for Text-to-Speech (TTS) synthesis.
useStep
A hook to manage multi-step processes or wizards.
useTimeout
A declarative hook for setTimeout.
Sensors
useInfiniteScroll
Automatically trigger a callback when an element scrolls into view.
useMeasure
Real-time element dimension tracking using ResizeObserver.
useNetworkState
Track network connection capability and status of the browser.
useOrientation
Track the browser window or device rotation and orientation changes.
usePageLeave
Detect when the user's mouse cursor leaves the browser tab boundaries.
usePermission
Monitor the status of browser permissions for hardware and system APIs.
useScreenWakeLock
Prevent the device screen from dimming or locking during critical interactions.
useTextSelection
Track and access the currently selected text and its position on the page.
useVibrate
Provide declarative haptic feedback using the browser Vibration API.
useWindowFocus
Track whether the browser window or tab is currently focused.
useBattery
A hook to access battery status information.
useClickOutside
React hook that detects clicks outside of a referenced element. Perfect for modals, dropdowns, and sidebars.
useDocumentVisibility
A React hook that tracks the document's current visibility state (visible or hidden).
useGeolocation
A hook to access the user's geolocation.
useHover
A hook to track if an element is being hovered.
useIdle
A React hook that detects user inactivity after a configurable timeout.
useIntersectionObserver
A powerful React hook to track the visibility of elements in the viewport. Perfect for scroll reveals and lazy loading.
useKeyPress
A React hook that detects when specific keyboard keys are pressed or held.
useLongPress
A hook to detect long press (press-and-hold) interactions.
useMediaQuery
A hook to detect if a media query matches.
useMousePosition
A React hook that tracks the mouse cursor's coordinates with high precision.
useOnlineStatus
A React hook that tracks the browser's online/offline status in real-time.
useScroll
A React hook that tracks scroll position, direction, and progress with high precision.
useWindowSize
A React hook that tracks window dimensions and responsive breakpoints in real-time.
State
useCounter
A state hook for numeric values with built-in increment, decrement, and reset functions.
useMap
A state hook specifically for managing a Javascript Map object.
useSet
A state hook for managing a Javascript Set object.
useDebounce
A React hook to delay the execution of a function or state update.
useHistoryState
A hook to manage state with undo and redo history.
useLocalStorage
React hook for syncing state with localStorage. Works across tabs, SSR-safe, TypeScript-ready.
usePrevious
A hook that returns the previous value of a variable.
useToggle
A React hook for managing boolean state with convenient toggle actions.
Built for the modern web
As a Fullstack Web Developer and Generative AI expert, I focus on creating tools that bridge the gap between complex logic and effortless Developer Experience.