reactuse
starsforks
How to install reactuse?
childrentime/reactuse
$git clone https://github.com/childrentime/reactuseReactUse 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.
README.md
| 1 | <p align="center"> |
| 2 | <a href="https://github.com/childrentime/reactuse#gh-light-mode-only"> |
| 3 | <img src="https://reactuse.com/img/og.png#gh-light-mode-only" alt="ReactUse - Collection of essential React Hooks" width="300"> |
| 4 | </a> |
| 5 | <a href="https://github.com/childrentime/reactuse#gh-dark-mode-only"> |
| 6 | <img src="https://reactuse.com/img/og-dark.png#gh-dark-mode-only" alt="ReactUse - Collection of essential React Hooks" width="300"> |
| 7 | </a> |
| 8 | </p> |
| 9 | |
| 10 | <p align="center"> |
| 11 | <a href="https://www.npmjs.com/package/@reactuses/core"><img alt="NPM Version" src="https://img.shields.io/npm/v/@reactuses/core?style=for-the-badge&labelColor=24292e"></a> |
| 12 | <a href="https://www.npmjs.com/package/@reactuses/core"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@reactuses/core?color=50a36f&label=&style=for-the-badge&labelColor=24292e"></a> |
| 13 | <img alt="UnLicense" src="https://img.shields.io/npm/l/@reactuses/core?style=for-the-badge&labelColor=24292e"> |
| 14 | <img alt="Tree Shaking Friendly" src="https://img.shields.io/badge/Tree%20Shaking-Friendly-brightgreen?style=for-the-badge&labelColor=24292e"> |
| 15 | <img alt="TypeScript Support" src="https://img.shields.io/badge/TypeScript-Support-blue?style=for-the-badge&labelColor=24292e"> |
| 16 | </p> |
| 17 | |
| 18 | <p align="center"> |
| 19 | <a href="https://context7.com/childrentime/reactuse"><img alt="Context7 indexed" src="https://img.shields.io/badge/Context7-Indexed-0078D4?style=for-the-badge&labelColor=24292e"></a> |
| 20 | <a href="https://deepwiki.com/childrentime/reactuse"><img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg"></a> |
| 21 | <a href="https://gitmcp.io/childrentime/reactuse"><img alt="GitMCP" src="https://img.shields.io/badge/GitMCP-Use%20with%20AI-22c55e?style=for-the-badge&labelColor=24292e"></a> |
| 22 | <a href="https://glama.ai/mcp/servers/childrentime/reactuse"><img alt="ReactUse MCP server on Glama" src="https://glama.ai/mcp/servers/childrentime/reactuse/badges/score.svg"></a> |
| 23 | </p> |
| 24 | |
| 25 | ## Introduction |
| 26 | |
| 27 | **ReactUse** is a comprehensive collection of **100+ essential React Hooks** for building modern React applications. Inspired by [VueUse](https://vueuse.org/), it provides production-ready hooks for browser APIs, state management, sensors, animations, DOM elements, and more. |
| 28 | |
| 29 | ### Features |
| 30 | |
| 31 | - 🎯 **100+ Hooks** — The most comprehensive React hooks collection |
| 32 | - 📦 **Tree-Shakable** — Import only what you need |
| 33 | - 🔷 **TypeScript** — Full type definitions for every hook |
| 34 | - 🖥️ **SSR Compatible** — Works with Next.js, Remix, and more |
| 35 | - 📚 **Well Documented** — Interactive demos for every hook |
| 36 | - 🤖 **MCP Support** — AI-powered hook discovery |
| 37 | |
| 38 | ### Installation |
| 39 | |
| 40 | ```bash |
| 41 | npm i @reactuses/core |
| 42 | ``` |
| 43 | |
| 44 | ### Quick Start |
| 45 | |
| 46 | ```tsx |
| 47 | import { useToggle } from "@reactuses/core"; |
| 48 | |
| 49 | const Demo = () => { |
| 50 | const [on, toggle] = useToggle(true); |
| 51 | return <button onClick={toggle}>{on ? "ON" : "OFF"}</button>; |
| 52 | }; |
| 53 | ``` |
| 54 | |
| 55 | --- |
| 56 | |
| 57 | ## Who's Using This |
| 58 | |
| 59 | [](https://www.pinduoduo.com/) |
| 60 | [](https://shopee.com/) |
| 61 | [](https://www.ctrip.com/) |
| 62 | |
| 63 | --- |
| 64 | |
| 65 | ## Hook Categories |
| 66 | |
| 67 | <details> |
| 68 | <summary><strong>Browser (48 hooks)</strong></summary> |
| 69 | |
| 70 | 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... |
| 71 | |
| 72 | </details> |
| 73 | |
| 74 | <details> |
| 75 | <summary><strong>State (24 hooks)</strong></summary> |
| 76 | |
| 77 | useBoolean, useControlled, useCounter, us |
People who liked this also viewed
6 picksType
- playwright-mcpPlaywright MCP fork that works with Cloudflare Browser RenderingMCP ServersApr 2026
- Playwright MCPBrowser automation for agents via accessibility snapshotsMCP Servers6 days ago
- chrome-devtools-mcpChrome DevTools for coding agentsMCP ServersJul 2026
- browser-operator-coreBrowser Operator - The AI browser with built in Multi-Agent platform! Open source alternative to ChatGPT Atlas, Perplexity Comet, Dia and Microsoft CoPilot Edge BrowserMCP ServersMar 2026
- fetcher-mcpMCP server for fetch web page content using Playwright headless browser.MCP ServersJan 2026
- mcpBrowser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browserMCP ServersApr 2025
