@reactuses/core 1.0.3 → 1.0.5

package/LICENSE

@@ -1,24 +1,24 @@
-This is free and unencumbered software released into the public domain.
-
-Anyone is free to copy, modify, publish, use, compile, sell, or
-distribute this software, either in source code form or as a compiled
-binary, for any purpose, commercial or non-commercial, and by any
-means.
-
-In jurisdictions that recognize copyright laws, the author or authors
-of this software dedicate any and all copyright interest in the
-software to the public domain. We make this dedication for the benefit
-of the public at large and to the detriment of our heirs and
-successors. We intend this dedication to be an overt act of
-relinquishment in perpetuity of all present and future rights to this
-software under copyright law.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
-OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
-ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-OTHER DEALINGS IN THE SOFTWARE.
-
-For more information, please refer to <http://unlicense.org/>
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org/>

package/README.md

@@ -1,81 +1,81 @@
-<div align = "center">
-   <h1 align = "center">
-    reactuse
-  </h1>
-</div>
-
-<p align="center">
-  <a href="https://bundlephobia.com/result?p=@reactuses/core">
-    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@reactuses/core?style=for-the-badge&labelColor=24292e">
-  </a>
-  <a aria-label="Types" href="https://www.npmjs.com/package/@reactuses/core">
-    <img alt="Types" src="https://img.shields.io/npm/types/react-use-system-color-mode?style=for-the-badge&labelColor=24292e">
-  </a>
-  <a aria-label="NPM version" 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>
-  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
-    <img alt="UnLicense" src="https://img.shields.io/npm/l/@reactuses/core?style=for-the-badge&labelColor=24292e">
-  </a>
-</p>
-
-<pre align="center">npm i @reactuses/core</pre>
-
-<p align="center">
-Collection of essential React Hooks Utilities.
-</p>
-
-<hr>
-
-## QuickStart
-
-```tsx harmony
-import { useToggle } from "@reactuses/core";
-
-const Demo = () => {
-  const [on, toggle] = useToggle(true);
-
-  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>
-  );
-};
-```
-
-Refer to [documentations](https://reactuse.com/) for more details.
-
-<hr>
-
-## Documentation & Live Examples
-
-* [Documentation](https://reactuse.com/)
-
-<hr/>
-
-## Contribute
-
-See the [**Contributing Guide**](CONTRIBUTING.md)
-
-<hr/>
-
-## Idea
-
-We want to keep a single hook function as simple as possible.
-
-* For data fetch, we recommend use [swr](https://www.npmjs.com/package/swr)
-
-* For keyboard shortcuts, we recommend use [react-hotkeys-hook](https://www.npmjs.com/package/react-hotkeys-hook)
-
-## Thanks
-
-This project is heavily inspired by the following awesome projects.
-
-* [streamich/react-use](https://github.com/streamich/react-use)
-* [ahooks](https://github.com/alibaba/hooks)
-* [vueuse](https://github.com/vueuse/vueuse)
-
-<hr/>
+<div align = "center">
+   <h1 align = "center">
+    reactuse
+  </h1>
+</div>
+
+<p align="center">
+  <a href="https://bundlephobia.com/result?p=@reactuses/core">
+    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@reactuses/core?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="Types" href="https://www.npmjs.com/package/@reactuses/core">
+    <img alt="Types" src="https://img.shields.io/npm/types/react-use-system-color-mode?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="NPM version" 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>
+  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
+    <img alt="UnLicense" src="https://img.shields.io/npm/l/@reactuses/core?style=for-the-badge&labelColor=24292e">
+  </a>
+</p>
+
+<pre align="center">npm i @reactuses/core</pre>
+
+<p align="center">
+Collection of essential React Hooks Utilities.
+</p>
+
+<hr>
+
+## QuickStart
+
+```tsx harmony
+import { useToggle } from "@reactuses/core";
+
+const Demo = () => {
+  const [on, toggle] = useToggle(true);
+
+  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>
+  );
+};
+```
+
+Refer to [documentations](https://reactuse.com/) for more details.
+
+<hr>
+
+## Documentation & Live Examples
+
+* [Documentation](https://reactuse.com/)
+
+<hr/>
+
+## Contribute
+
+See the [**Contributing Guide**](CONTRIBUTING.md)
+
+<hr/>
+
+## Idea
+
+We want to keep a single hook function as simple as possible.
+
+* For data fetch, we recommend use [swr](https://www.npmjs.com/package/swr)
+
+* For keyboard shortcuts, we recommend use [react-hotkeys-hook](https://www.npmjs.com/package/react-hotkeys-hook)
+
+## Thanks
+
+This project is heavily inspired by the following awesome projects.
+
+* [streamich/react-use](https://github.com/streamich/react-use)
+* [ahooks](https://github.com/alibaba/hooks)
+* [vueuse](https://github.com/vueuse/vueuse)
+
+<hr/>

package/index.cjs

@@ -2298,6 +2298,70 @@ function useElementBounding(target, options = {}) {
   };
 }
 
+function useElementVisibility(target, options = {}) {
+  const [visible, setVisible] = react.useState(false);
+  const callback = react.useCallback((entries) => {
+    const rect = entries[0].boundingClientRect;
+    setVisible(
+      rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0
+    );
+  }, []);
+  const stop = useIntersectionObserver(target, callback, options);
+  return [visible, stop];
+}
+
+function useWindowsFocus() {
+  const [focused, setFocused] = react.useState(() => {
+    if (!window) {
+      return false;
+    }
+    return window.document.hasFocus();
+  });
+  useEventListener("blur", () => {
+    setFocused(false);
+  });
+  useEventListener("focus", () => {
+    setFocused(true);
+  });
+  return focused;
+}
+
+function useWindowSize() {
+  const [windowSize, setWindowSize] = react.useState({
+    width: 0,
+    height: 0
+  });
+  const handleSize = () => {
+    setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  };
+  useEventListener("resize", handleSize);
+  useIsomorphicLayoutEffect(() => {
+    handleSize();
+  }, []);
+  return windowSize;
+}
+
+function useWindowScroll() {
+  const [state, setState] = useRafState(() => ({
+    x: 0,
+    y: 0
+  }));
+  const handleScroll = () => {
+    setState({ x: window.scrollX, y: window.screenY });
+  };
+  useEventListener("scroll", handleScroll, window, {
+    capture: false,
+    passive: true
+  });
+  useIsomorphicLayoutEffect(() => {
+    handleScroll();
+  }, []);
+  return state;
+}
+
 exports.useActiveElement = useActiveElement;
 exports.useCounter = useCounter;
 exports.useCustomCompareEffect = useCustomCompareEffect;
@@ -2310,6 +2374,7 @@ exports.useDraggable = useDraggable;
 exports.useDropZone = useDropZone;
 exports.useElementBounding = useElementBounding;
 exports.useElementSize = useElementSize;
+exports.useElementVisibility = useElementVisibility;
 exports.useEvent = useEvent;
 exports.useEventEmitter = useEventEmitter;
 exports.useEventListener = useEventListener;
@@ -2365,3 +2430,6 @@ exports.useUpdate = useUpdate;
 exports.useUpdateEffect = useUpdateEffect;
 exports.useUpdateLayoutEffect = useUpdateLayoutEffect;
 exports.useVirtualList = useVirtualList;
+exports.useWindowScroll = useWindowScroll;
+exports.useWindowSize = useWindowSize;
+exports.useWindowsFocus = useWindowsFocus;