115+ production-ready React Hooks for sensors, UI, state & browser APIs. Tree-shakable, SSR-safe, TypeScript-first. Used
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.
@childrentimenpm i @reactuses/core
import { useToggle } from "@reactuses/core";
const Demo = () => {
const [on, toggle] = useToggle(true);
return <button onClick={toggle}>{on ? "ON" : "OFF"}</button>;
};
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...
useBoolean, useControlled, useCounter, useCycleList, useDebounce, useDebounceFn, useDisclosure, useLocalStorage, useMap, usePrevious, useSessionStorage, useSetState, useThrottle, useThrottleFn, useToggle, and more...
useClickOutside, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementSize, useElementVisibility, useFocus, useHover, useInfiniteScroll, useIntersectionObserver, useLongPress, useMeasure, useMouse, useMousePressed, useMutationObserver, useResizeObserver, useScroll, useScrollIntoView, and more...
useAsyncEffect, useCustomCompareEffect, useDeepCompareEffect, useEventListener, useInterval, useMount, useRafFn, useTimeout, useTimeoutFn, useUnmount, useUpdate, and more...
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"
}
📖 Full Documentation | 📖 LLM-friendly Documentation | 💬 Discord | 🐛 Issues
See the Contributing Guide
See the ChangeLog
This project is heavily inspired by the following awesome projects.
If my work has helped you, consider buying me a cup of coffee. Thank you very much🥰!.
Run Claude Code as an MCP server so any agent can delegate coding tasks to it
@microsoft✓ OfficialBrowser automation using accessibility snapshots instead of screenshots
@googleapis✓ OfficialGoogle's universal MCP server supporting PostgreSQL, MySQL, MongoDB, Redis, and 10+ databases
@github✓ OfficialOfficial GitHub integration for repos, issues, PRs, and CI/CD workflows