@reactuses/core 6.1.12 → 6.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +64 -37
  2. package/dist/index.cjs +271 -110
  3. package/dist/index.d.cts +91 -2
  4. package/dist/index.d.mts +91 -2
  5. package/dist/index.d.ts +91 -2
  6. package/dist/index.mjs +271 -111
  7. package/package.json +35 -5
package/README.md CHANGED
@@ -12,40 +12,67 @@
12
12
  <img alt="TypeScript Support" src="https://img.shields.io/badge/TypeScript-Support-blue?style=for-the-badge&labelColor=24292e">
13
13
  </p>
14
14
 
15
- ## MCP Support
15
+ ## Introduction
16
16
 
17
- 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.
17
+ **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.
18
18
 
19
- Add the following to your configuration:
19
+ ### Features
20
20
 
21
- ```json
22
- "@reactuses/mcp": {
23
- "command": "npx",
24
- "args": ["-y", "@reactuses/mcp@latest"],
25
- "type": "stdio"
26
- }
27
- ```
21
+ - 🎯 **100+ Hooks** — The most comprehensive React hooks collection
22
+ - 📦 **Tree-Shakable** — Import only what you need
23
+ - 🔷 **TypeScript** — Full type definitions for every hook
24
+ - 🖥️ **SSR Compatible** — Works with Next.js, Remix, and more
25
+ - 📚 **Well Documented** — Interactive demos for every hook
26
+ - 🤖 **MCP Support** — AI-powered hook discovery
28
27
 
29
- ## QuickStart
28
+ ### Installation
30
29
 
31
- ```tsx harmony
32
- import { useToggle } from '@reactuses/core'
30
+ ```bash
31
+ npm i @reactuses/core
32
+ ```
33
33
 
34
- function Demo() {
35
- const [on, toggle] = useToggle(true)
34
+ ### Quick Start
36
35
 
37
- return (
38
- <div>
39
- <div>{on ? 'ON' : 'OFF'}</div>
40
- <button onClick={toggle}>Toggle</button>
41
- <button onClick={() => toggle(true)}>set ON</button>
42
- <button onClick={() => toggle(false)}>set OFF</button>
43
- </div>
44
- )
45
- }
36
+ ```tsx
37
+ import { useToggle } from "@reactuses/core";
38
+
39
+ const Demo = () => {
40
+ const [on, toggle] = useToggle(true);
41
+ return <button onClick={toggle}>{on ? "ON" : "OFF"}</button>;
42
+ };
46
43
  ```
47
44
 
48
- Refer to [documentations](https://reactuse.com/) for more details.
45
+ ---
46
+
47
+ ## Hook Categories
48
+
49
+ <details>
50
+ <summary><strong>Browser (48 hooks)</strong></summary>
51
+
52
+ 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...
53
+
54
+ </details>
55
+
56
+ <details>
57
+ <summary><strong>State (24 hooks)</strong></summary>
58
+
59
+ useBoolean, useControlled, useCounter, useCycleList, useDebounce, useDebounceFn, useDisclosure, useLocalStorage, useMap, usePrevious, useSessionStorage, useSetState, useThrottle, useThrottleFn, useToggle, and more...
60
+
61
+ </details>
62
+
63
+ <details>
64
+ <summary><strong>Element (19 hooks)</strong></summary>
65
+
66
+ useClickOutside, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementSize, useElementVisibility, useFocus, useHover, useInfiniteScroll, useIntersectionObserver, useLongPress, useMeasure, useMouse, useMousePressed, useMutationObserver, useResizeObserver, useScroll, useScrollIntoView, and more...
67
+
68
+ </details>
69
+
70
+ <details>
71
+ <summary><strong>Effect (20 hooks)</strong></summary>
72
+
73
+ useAsyncEffect, useCustomCompareEffect, useDeepCompareEffect, useEventListener, useInterval, useMount, useRafFn, useTimeout, useTimeoutFn, useUnmount, useUpdate, and more...
74
+
75
+ </details>
49
76
 
50
77
  ---
51
78
 
@@ -58,25 +85,25 @@ Refer to [documentations](https://reactuse.com/) for more details.
58
85
 
59
86
  ---
60
87
 
61
- ## Documentation & Live Examples
62
-
63
- - [Documentation](https://reactuse.com/)
88
+ ## MCP Support
64
89
 
65
- ---
90
+ 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.
66
91
 
67
- ## Feedback
92
+ Add the following to your configuration:
68
93
 
69
- You can submit an [issue](https://github.com/childrentime/reactuse/issues) or provide feedback on [Discord](https://discord.gg/HMsq6cFkKp).
94
+ ```json
95
+ "@reactuses/mcp": {
96
+ "command": "npx",
97
+ "args": ["-y", "@reactuses/mcp@latest"],
98
+ "type": "stdio"
99
+ }
100
+ ```
70
101
 
71
102
  ---
72
103
 
73
- ## Contribute
74
-
75
- See the [**Contributing Guide**](https://github.com/childrentime/reactuse/blob/main/CONTRIBUTING.md)
76
-
77
- ## ChangeLog
104
+ ## Documentation
78
105
 
79
- See the [**ChangeLog**](https://github.com/childrentime/reactuse/blob/main/packages/core/changelog.md)
106
+ 📖 [Full Documentation](https://reactuse.com) | 💬 [Discord](https://discord.gg/VEMFdByJ) | 🐛 [Issues](https://github.com/childrentime/reactuse/issues)
80
107
 
81
108
  ---
82
109