@reactuses/core 1.0.1 → 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

@@ -2148,6 +2148,156 @@ function useActiveElement() {
   return active;
 }
 
+function useDraggable(target, options = {}) {
+  var _a, _b;
+  const draggingElement = getTargetElement(options.draggingElement, window);
+  const draggingHandle = getTargetElement((_a = options.handle) != null ? _a : target);
+  const [position, setPositon] = react.useState(
+    (_b = options.initialValue) != null ? _b : { x: 0, y: 0 }
+  );
+  const [pressedDelta, setPressedDelta] = react.useState();
+  const filterEvent = (e) => {
+    if (options.pointerTypes) {
+      return options.pointerTypes.includes(e.pointerType);
+    }
+    return true;
+  };
+  const handleEvent = (e) => {
+    if (options.preventDefault) {
+      e.preventDefault();
+    }
+    if (options.stopPropagation) {
+      e.stopPropagation();
+    }
+  };
+  const start = (e) => {
+    var _a2;
+    const element = getTargetElement(target);
+    if (!filterEvent(e) || !element) {
+      return;
+    }
+    if (options.exact && e.target !== element) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    const pos = {
+      x: e.pageX - rect.left,
+      y: e.pageY - rect.top
+    };
+    if (((_a2 = options.onStart) == null ? void 0 : _a2.call(options, pos, e)) === false) {
+      return;
+    }
+    setPressedDelta(pos);
+    handleEvent(e);
+  };
+  const move = (e) => {
+    var _a2;
+    if (!filterEvent(e)) {
+      return;
+    }
+    if (!pressedDelta) {
+      return;
+    }
+    setPositon({
+      x: e.pageX - pressedDelta.x,
+      y: e.pageY - pressedDelta.y
+    });
+    (_a2 = options.onMove) == null ? void 0 : _a2.call(options, position, e);
+    handleEvent(e);
+  };
+  const end = (e) => {
+    var _a2;
+    if (!filterEvent(e)) {
+      return;
+    }
+    if (!pressedDelta) {
+      return;
+    }
+    setPressedDelta(void 0);
+    (_a2 = options.onEnd) == null ? void 0 : _a2.call(options, position, e);
+    handleEvent(e);
+  };
+  useEventListener("pointerdown", start, draggingHandle, true);
+  useEventListener("pointermove", move, draggingElement, true);
+  useEventListener("pointerup", end, draggingElement, true);
+  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;
@@ -2156,7 +2306,9 @@ exports.useDebounce = useDebounce;
 exports.useDebounceFn = useDebounceFn;
 exports.useDeepCompareEffect = useDeepCompareEffect;
 exports.useDocumentVisibility = useDocumentVisibility;
+exports.useDraggable = useDraggable;
 exports.useDropZone = useDropZone;
+exports.useElementBounding = useElementBounding;
 exports.useElementSize = useElementSize;
 exports.useEvent = useEvent;
 exports.useEventEmitter = useEventEmitter;