@reactuses/core 6.1.12 → 6.2.0

package/README.md

@@ -12,40 +12,67 @@
   <img alt="TypeScript Support" src="https://img.shields.io/badge/TypeScript-Support-blue?style=for-the-badge&labelColor=24292e">
 </p>
 
-## MCP Support
+## Introduction
 
-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.
+**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.
 
-Add the following to your configuration:
+### Features
 
-```json
-"@reactuses/mcp": {
-  "command": "npx",
-  "args": ["-y", "@reactuses/mcp@latest"],
-  "type": "stdio"
-}
-```
+- 🎯 **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
 
-## QuickStart
+### Installation
 
-```tsx harmony
-import { useToggle } from '@reactuses/core'
+```bash
+npm i @reactuses/core
+```
 
-function Demo() {
-  const [on, toggle] = useToggle(true)
+### Quick Start
 
-  return (
-    <div>
-      <div>{on ? 'ON' : 'OFF'}</div>
-      <button onClick={toggle}>Toggle</button>
-      <button onClick={() => toggle(true)}>set ON</button>
-      <button onClick={() => toggle(false)}>set OFF</button>
-    </div>
-  )
-}
+```tsx
+import { useToggle } from "@reactuses/core";
+
+const Demo = () => {
+  const [on, toggle] = useToggle(true);
+  return <button onClick={toggle}>{on ? "ON" : "OFF"}</button>;
+};
 ```
 
-Refer to [documentations](https://reactuse.com/) for more details.
+---
+
+## Hook Categories
+
+<details>
+<summary><strong>Browser (48 hooks)</strong></summary>
+
+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...
+
+</details>
+
+<details>
+<summary><strong>State (24 hooks)</strong></summary>
+
+useBoolean, useControlled, useCounter, useCycleList, useDebounce, useDebounceFn, useDisclosure, useLocalStorage, useMap, usePrevious, useSessionStorage, useSetState, useThrottle, useThrottleFn, useToggle, and more...
+
+</details>
+
+<details>
+<summary><strong>Element (19 hooks)</strong></summary>
+
+useClickOutside, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementSize, useElementVisibility, useFocus, useHover, useInfiniteScroll, useIntersectionObserver, useLongPress, useMeasure, useMouse, useMousePressed, useMutationObserver, useResizeObserver, useScroll, useScrollIntoView, and more...
+
+</details>
+
+<details>
+<summary><strong>Effect (20 hooks)</strong></summary>
+
+useAsyncEffect, useCustomCompareEffect, useDeepCompareEffect, useEventListener, useInterval, useMount, useRafFn, useTimeout, useTimeoutFn, useUnmount, useUpdate, and more...
+
+</details>
 
 ---
 
@@ -58,25 +85,25 @@ Refer to [documentations](https://reactuse.com/) for more details.
 
 ---
 
-## Documentation & Live Examples
-
-- [Documentation](https://reactuse.com/)
+## 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.
 
-## Feedback
+Add the following to your configuration:
 
-You can submit an [issue](https://github.com/childrentime/reactuse/issues) or provide feedback on [Discord](https://discord.gg/HMsq6cFkKp).
+```json
+"@reactuses/mcp": {
+  "command": "npx",
+  "args": ["-y", "@reactuses/mcp@latest"],
+  "type": "stdio"
+}
+```
 
 ---
 
-## Contribute
-
-See the [**Contributing Guide**](https://github.com/childrentime/reactuse/blob/main/CONTRIBUTING.md)
-
-## ChangeLog
+## Documentation
 
-See the [**ChangeLog**](https://github.com/childrentime/reactuse/blob/main/packages/core/changelog.md)
+📖 [Full Documentation](https://reactuse.com) | 💬 [Discord](https://discord.gg/VEMFdByJ) | 🐛 [Issues](https://github.com/childrentime/reactuse/issues)
 
 ---
 

package/dist/index.cjs

@@ -223,7 +223,7 @@ function useMountedState() {
     return get;
 }
 
-function asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$8(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -237,16 +237,16 @@ function asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator$7(fn) {
+function _async_to_generator$8(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$8(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$8(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
@@ -255,7 +255,7 @@ function _async_to_generator$7(fn) {
 const useAsyncEffect = (effect, cleanup = noop$1, deps)=>{
     const mounted = useMountedState();
     React.useEffect(()=>{
-        const execute = ()=>_async_to_generator$7(function*() {
+        const execute = ()=>_async_to_generator$8(function*() {
                 if (!mounted()) {
                     return;
                 }
@@ -1360,7 +1360,7 @@ function useSupported(callback, sync = false) {
     return supported;
 }
 
-function asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -1374,16 +1374,16 @@ function asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator$6(fn) {
+function _async_to_generator$7(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
@@ -1391,7 +1391,7 @@ function _async_to_generator$6(fn) {
 }
 const useEyeDropper = ()=>{
     const isSupported = useSupported(()=>typeof window !== 'undefined' && 'EyeDropper' in window, true);
-    const open = React.useCallback((options = {})=>_async_to_generator$6(function*() {
+    const open = React.useCallback((options = {})=>_async_to_generator$7(function*() {
             if (!isSupported) {
                 return {
                     sRGBHex: ''
@@ -1426,7 +1426,7 @@ function useFavicon(href, baseUrl = '', rel = 'icon') {
     ]);
 }
 
-function asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -1440,16 +1440,16 @@ function asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator$5(fn) {
+function _async_to_generator$6(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
@@ -1492,7 +1492,7 @@ const useFileDialog = (options = defaultOptions$1)=>{
         return input;
     }, []);
     inputRef.current = initFn();
-    const open = (localOptions)=>_async_to_generator$5(function*() {
+    const open = (localOptions)=>_async_to_generator$6(function*() {
             if (!inputRef.current) {
                 return;
             }
@@ -1905,7 +1905,7 @@ const createUpdateEffect = (hook)=>(effect, deps)=>{
 
 const useUpdateEffect = createUpdateEffect(React.useEffect);
 
-function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -1919,16 +1919,16 @@ function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator$4(fn) {
+function _async_to_generator$5(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
@@ -1961,7 +1961,7 @@ const useInfiniteScroll = (target, onLoadMore, options = defaultOptions$1)=>{
     const di = state[3][direction];
     useUpdateEffect(()=>{
         const element = getTargetElement(target);
-        const fn = ()=>_async_to_generator$4(function*() {
+        const fn = ()=>_async_to_generator$5(function*() {
                 var _element_scrollHeight, _element_scrollWidth;
                 const previous = {
                     height: (_element_scrollHeight = element == null ? void 0 : element.scrollHeight) != null ? _element_scrollHeight : 0,
@@ -2111,7 +2111,7 @@ const useMeasure = (target, options = defaultOptions$1)=>{
     ];
 };
 
-function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -2125,16 +2125,16 @@ function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator$3(fn) {
+function _async_to_generator$4(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
@@ -2168,7 +2168,7 @@ const useMediaDevices = (options = {})=>{
             });
         }).catch(noop$1);
     }, []);
-    const ensurePermissions = React.useCallback(()=>_async_to_generator$3(function*() {
+    const ensurePermissions = React.useCallback(()=>_async_to_generator$4(function*() {
             if (!isSupported) {
                 return false;
             }
@@ -3257,7 +3257,10 @@ function useSticky(targetElement, { axis = 'y', nav = 0 }, scrollElement) {
     }, [
         targetKey,
         scrollKey,
-        scrollHandler
+        scrollHandler,
+        targetRef,
+        scrollRef,
+        axisRef
     ]);
     return [
         isSticky,
@@ -3407,7 +3410,7 @@ const useToggle = (initialValue)=>{
 
 const useUpdateLayoutEffect = createUpdateEffect(React.useLayoutEffect);
 
-function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -3421,16 +3424,16 @@ function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator$2(fn) {
+function _async_to_generator$3(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
@@ -3460,7 +3463,7 @@ const useWebNotification = (requestPermissions = false)=>{
     }, [
         isSupported
     ]);
-    const ensurePermissions = React.useCallback(()=>_async_to_generator$2(function*() {
+    const ensurePermissions = React.useCallback(()=>_async_to_generator$3(function*() {
             if (!isSupported) return;
             if (!permissionGranted.current && Notification.permission !== 'denied') {
                 const result = yield Notification.requestPermission();
@@ -3571,7 +3574,7 @@ const useWindowSize = ()=>{
     };
 };
 
-function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -3585,16 +3588,16 @@ function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator$1(fn) {
+function _async_to_generator$2(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
@@ -3602,7 +3605,7 @@ function _async_to_generator$1(fn) {
 }
 const useClipboard = ()=>{
     const [text, setText] = React.useState('');
-    const updateText = React.useCallback(()=>_async_to_generator$1(function*() {
+    const updateText = React.useCallback(()=>_async_to_generator$2(function*() {
             // Check if document is focused before attempting to read clipboard
             if (!document.hasFocus()) {
                 return;
@@ -3619,7 +3622,7 @@ const useClipboard = ()=>{
     useEventListener('cut', updateText);
     // Also listen for focus events to update clipboard when window regains focus
     useEventListener('focus', updateText, window);
-    const copy = React.useCallback((txt)=>_async_to_generator$1(function*() {
+    const copy = React.useCallback((txt)=>_async_to_generator$2(function*() {
             setText(txt);
             try {
                 yield window.navigator.clipboard.writeText(txt);
@@ -4147,7 +4150,7 @@ const useElementByPoint = (options)=>{
     };
 };
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -4161,16 +4164,16 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator(fn) {
+function _async_to_generator$1(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
@@ -4221,7 +4224,7 @@ const useFetchEventSource = (url, options = {})=>{
             options.onClose == null ? void 0 : options.onClose.call(options);
         }
     });
-    const open = useEvent(()=>_async_to_generator(function*() {
+    const open = useEvent(()=>_async_to_generator$1(function*() {
             close();
             setStatus('CONNECTING');
             explicitlyClosed.current = false;
@@ -4260,7 +4263,7 @@ const useFetchEventSource = (url, options = {})=>{
                 }
                 yield fetchEventSource.fetchEventSource(url.toString(), _extends({}, finalOptions, {
                     onopen (response) {
-                        return _async_to_generator(function*() {
+                        return _async_to_generator$1(function*() {
                             if (response.ok) {
                                 setStatus('CONNECTED');
                                 setError(null);
@@ -4509,6 +4512,115 @@ const useSpeechRecognition = (options = {})=>{
     };
 };
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+const useWakeLock = (options = {})=>{
+    const { onRequest, onRelease, onError } = options;
+    const isSupported = useSupported(()=>'wakeLock' in navigator);
+    const [isActive, setIsActive] = React.useState(false);
+    const sentinelRef = React.useRef(null);
+    const requestedTypeRef = React.useRef(false);
+    const forceRequest = useEvent(()=>_async_to_generator(function*() {
+            if (!isSupported) return;
+            try {
+                var _sentinelRef_current;
+                yield (_sentinelRef_current = sentinelRef.current) == null ? void 0 : _sentinelRef_current.release();
+                const sentinel = yield navigator.wakeLock.request('screen');
+                sentinelRef.current = sentinel;
+                setIsActive(true);
+                sentinel.addEventListener('release', ()=>{
+                    var _sentinelRef_current;
+                    var _sentinelRef_current_type;
+                    requestedTypeRef.current = (_sentinelRef_current_type = (_sentinelRef_current = sentinelRef.current) == null ? void 0 : _sentinelRef_current.type) != null ? _sentinelRef_current_type : false;
+                    sentinelRef.current = null;
+                    setIsActive(false);
+                    onRelease == null ? void 0 : onRelease();
+                }, {
+                    once: true
+                });
+                onRequest == null ? void 0 : onRequest();
+            } catch (error) {
+                onError == null ? void 0 : onError(error);
+            }
+        })());
+    const request = useEvent(()=>_async_to_generator(function*() {
+            if (!isSupported) return;
+            if (document.visibilityState === 'visible') {
+                yield forceRequest();
+            } else {
+                requestedTypeRef.current = 'screen';
+            }
+        })());
+    const release = useEvent(()=>_async_to_generator(function*() {
+            requestedTypeRef.current = false;
+            const s = sentinelRef.current;
+            sentinelRef.current = null;
+            setIsActive(false);
+            try {
+                yield s == null ? void 0 : s.release();
+            } catch (error) {
+                onError == null ? void 0 : onError(error);
+            }
+        })());
+    React.useEffect(()=>{
+        const handleVisibilityChange = ()=>{
+            if (document.visibilityState === 'visible' && requestedTypeRef.current) {
+                requestedTypeRef.current = false;
+                forceRequest();
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return ()=>{
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [
+        forceRequest
+    ]);
+    React.useEffect(()=>{
+        return ()=>{
+            requestedTypeRef.current = false;
+            if (sentinelRef.current) {
+                sentinelRef.current.release();
+                sentinelRef.current = null;
+            }
+        };
+    }, []);
+    return {
+        isSupported,
+        isActive,
+        request,
+        release,
+        forceRequest
+    };
+};
+
 exports.assignRef = assignRef;
 exports.defaultOptions = defaultOptions;
 exports.mergeRefs = mergeRefs;
@@ -4619,6 +4731,7 @@ exports.useUnmount = useUnmount;
 exports.useUpdate = useUpdate;
 exports.useUpdateEffect = useUpdateEffect;
 exports.useUpdateLayoutEffect = useUpdateLayoutEffect;
+exports.useWakeLock = useWakeLock;
 exports.useWebNotification = useWebNotification;
 exports.useWindowScroll = useWindowScroll;
 exports.useWindowSize = useWindowSize;