@reactuses/core 1.0.2 → 1.0.3

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,73 +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/>
-
-## 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

@@ -2223,6 +2223,81 @@ function useDraggable(target, options = {}) {
   return [position.x, position.y, !!pressedDelta];
 }
 
+function useElementBounding(target, options = {}) {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true
+  } = options;
+  const [height, setHeight] = react.useState(0);
+  const [bottom, setBottom] = react.useState(0);
+  const [left, setLeft] = react.useState(0);
+  const [right, setRight] = react.useState(0);
+  const [top, setTop] = react.useState(0);
+  const [width, setWidth] = react.useState(0);
+  const [x, setX] = react.useState(0);
+  const [y, setY] = react.useState(0);
+  const update = useEvent(() => {
+    const element = getTargetElement(target);
+    if (!element) {
+      if (reset) {
+        setHeight(0);
+        setBottom(0);
+        setLeft(0);
+        setRight(0);
+        setTop(0);
+        setWidth(0);
+        setX(0);
+        setY(0);
+      }
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    setHeight(rect.height);
+    setBottom(rect.bottom);
+    setLeft(rect.left);
+    setRight(rect.right);
+    setTop(rect.top);
+    setWidth(rect.width);
+    setX(rect.x);
+    setY(rect.y);
+  });
+  useResizeObserver(target, update);
+  react.useEffect(() => {
+    if (immediate) {
+      update();
+    }
+  }, [immediate, update]);
+  react.useEffect(() => {
+    if (windowScroll) {
+      window.addEventListener("scroll", update, { passive: true });
+    }
+    if (windowResize) {
+      window.addEventListener("resize", update, { passive: true });
+    }
+    return () => {
+      if (windowScroll) {
+        window.removeEventListener("scroll", update);
+      }
+      if (windowResize) {
+        window.removeEventListener("resize", update);
+      }
+    };
+  }, [update, windowResize, windowScroll]);
+  return {
+    height,
+    bottom,
+    left,
+    right,
+    top,
+    width,
+    x,
+    y,
+    update
+  };
+}
+
 exports.useActiveElement = useActiveElement;
 exports.useCounter = useCounter;
 exports.useCustomCompareEffect = useCustomCompareEffect;
@@ -2233,6 +2308,7 @@ exports.useDeepCompareEffect = useDeepCompareEffect;
 exports.useDocumentVisibility = useDocumentVisibility;
 exports.useDraggable = useDraggable;
 exports.useDropZone = useDropZone;
+exports.useElementBounding = useElementBounding;
 exports.useElementSize = useElementSize;
 exports.useEvent = useEvent;
 exports.useEventEmitter = useEventEmitter;