Reactuse

Sponsors

Sponsoring ReactUse puts your product in front of the React developers who install @reactuses/core every month — your logo right here at the top of the README, and on reactuse.com/sponsor. Live reach:

💎 Special Sponsors

Cenno

Expense tracking for iPhone & iPad — no account, no server, no ads. Free on the App Store.

Unscript

English speaking practice for iPhone — say one real dialogue four times, with less of the script each time. Speech stays on your phone. Free on the App Store.

FogAway

Uncover the places you explore, record your routes, and revisit each day. Tracks stay on your phone. Available on the App Store.

🥇 Gold, 🥈 Silver and 🥉 Bronze slots are open — claim one and your logo goes live here within 48 hours. Tiers, benefits and company invoicing: reactuse.com/sponsor.

Introduction

ReactUse is a comprehensive collection of 100+ essential React Hooks for building modern React applications. Inspired by VueUse, it provides production-ready hooks for browser APIs, state management, sensors, animations, DOM elements, and more.

Features

• 🎯 100+ Hooks — The most comprehensive React hooks collection
• 📦 Tree-Shakable — Import only what you need
• 🔷 TypeScript — Full type definitions for every hook
• 🖥️ SSR Compatible — Works with Next.js, Remix, and more
• 📚 Well Documented — Interactive demos for every hook
• 🤖 MCP Support — AI-powered hook discovery

Installation

npm i @reactuses/core

Quick Start

import { useToggle } from "@reactuses/core";

const Demo = () => {
  const [on, toggle] = useToggle(true);
  return <button onClick={toggle}>{on ? "ON" : "OFF"}</button>;
};

Who's Using This

Hook Categories

Browser (50 hooks)

useClipboard, useColorMode, useCookie, useDarkMode, useDocumentVisibility, useEyeDropper, useFavicon, useFileDialog, useFullscreen, useMediaDevices, useMediaQuery, useOnline, usePermission, usePlatform, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, useScreenSafeArea, useScriptTag, useTextDirection, useTitle, useWebNotification, useBroadcastChannel, useEventSource, useFetchEventSource, useGeolocation, useIdle, useKeyModifier, useMobileLandscape, useNetwork, useOrientation, usePageLeave, useSpeechRecognition, useWindowFocus, useWindowScroll, useWindowSize, and more...

State (24 hooks)

useBoolean, useControlled, useCounter, useCycleList, useDebounce, useDebounceFn, useDisclosure, useLocalStorage, useMap, usePrevious, useSessionStorage, useSetState, useThrottle, useThrottleFn, useToggle, and more...

Element (19 hooks)

useClickOutside, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementSize, useElementVisibility, useFocus, useHover, useInfiniteScroll, useIntersectionObserver, useLongPress, useMeasure, useMouse, useMousePressed, useMutationObserver, useResizeObserver, useScroll, useScrollIntoView, and more...

Effect (20 hooks)

useAsyncEffect, useCustomCompareEffect, useDeepCompareEffect, useEventListener, useInterval, useMount, useRafFn, useTimeout, useTimeoutFn, useUnmount, useUpdate, and more...

Integrations (1 hook)

useQRCode

MCP Support

If you want to use the MCP (Model Context Protocol) integration with reactuse, you can easily set it up with the following configuration. This allows you to run the @reactuses/mcp utility via npx for enhanced command-line support and automation.

Add the following to your configuration:

"@reactuses/mcp": {
  "command": "npx",
  "args": ["-y", "@reactuses/mcp@latest"],
  "type": "stdio"
}

Documentation

📖 Full Documentation | 📖 LLM-friendly Documentation | 💬 Discord | 🐛 Issues

Contribute

See the **Contributing Guide**

ChangeLog

See the **ChangeLog**

Thanks

This project is heavily inspired by the following awesome projects.

• streamich/react-use
• ahooks
• vueuse

Support ReactUse

ReactUse is free, released into the public domain under the Unlicense, and maintained in spare time. If it saved you a day of work, consider becoming a sponsor (from $5/month) or buying me a coffee — it keeps the hooks maintained and the docs interactive. 🥰