@reactuses/core 1.0.2 → 1.0.4

package/README.md

@@ -62,6 +62,14 @@ 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.

package/index.cjs

@@ -2223,6 +2223,109 @@ 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
+  };
+}
+
+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;
+}
+
 exports.useActiveElement = useActiveElement;
 exports.useCounter = useCounter;
 exports.useCustomCompareEffect = useCustomCompareEffect;
@@ -2233,7 +2336,9 @@ exports.useDeepCompareEffect = useDeepCompareEffect;
 exports.useDocumentVisibility = useDocumentVisibility;
 exports.useDraggable = useDraggable;
 exports.useDropZone = useDropZone;
+exports.useElementBounding = useElementBounding;
 exports.useElementSize = useElementSize;
+exports.useElementVisibility = useElementVisibility;
 exports.useEvent = useEvent;
 exports.useEventEmitter = useEventEmitter;
 exports.useEventListener = useEventListener;
@@ -2289,3 +2394,4 @@ exports.useUpdate = useUpdate;
 exports.useUpdateEffect = useUpdateEffect;
 exports.useUpdateLayoutEffect = useUpdateLayoutEffect;
 exports.useVirtualList = useVirtualList;
+exports.useWindowsFocus = useWindowsFocus;

package/index.d.ts

@@ -648,4 +648,46 @@ interface UseDraggableOptions {
 }
 declare function useDraggable(target: BasicTarget<HTMLElement | SVGElement>, options?: UseDraggableOptions): readonly [number, number, boolean];
 
-export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementSize, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, _default as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, _default$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useResizeObserver, useScriptTag, useScroll, useScrollLock, useSessionStorage, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$3 as useUpdateEffect, _default$2 as useUpdateLayoutEffect, useVirtualList };
+interface UseElementBoundingOptions {
+    /**
+     * Reset values to 0 on component unmounted
+     *
+     * @default true
+     */
+    reset?: boolean;
+    /**
+     * Listen to window resize event
+     *
+     * @default true
+     */
+    windowResize?: boolean;
+    /**
+     * Listen to window scroll event
+     *
+     * @default true
+     */
+    windowScroll?: boolean;
+    /**
+     * Immediately call update on component mounted
+     *
+     * @default true
+     */
+    immediate?: boolean;
+}
+declare function useElementBounding(target: BasicTarget, options?: UseElementBoundingOptions): {
+    readonly height: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+    readonly top: number;
+    readonly width: number;
+    readonly x: number;
+    readonly y: number;
+    readonly update: () => void;
+};
+
+declare function useElementVisibility(target: BasicTarget<HTMLElement | SVGElement>, options?: IntersectionObserverInit): readonly [any, () => void];
+
+declare function useWindowsFocus(): boolean;
+
+export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, _default as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, _default$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useResizeObserver, useScriptTag, useScroll, useScrollLock, useSessionStorage, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$3 as useUpdateEffect, _default$2 as useUpdateLayoutEffect, useVirtualList, useWindowsFocus };

package/index.mjs

@@ -2219,4 +2219,107 @@ function useDraggable(target, options = {}) {
   return [position.x, position.y, !!pressedDelta];
 }
 
-export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementSize, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useResizeObserver, useScriptTag, useScroll, useScrollLock, useSessionStorage, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useVirtualList };
+function useElementBounding(target, options = {}) {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true
+  } = options;
+  const [height, setHeight] = useState(0);
+  const [bottom, setBottom] = useState(0);
+  const [left, setLeft] = useState(0);
+  const [right, setRight] = useState(0);
+  const [top, setTop] = useState(0);
+  const [width, setWidth] = useState(0);
+  const [x, setX] = useState(0);
+  const [y, setY] = 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);
+  useEffect(() => {
+    if (immediate) {
+      update();
+    }
+  }, [immediate, update]);
+  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
+  };
+}
+
+function useElementVisibility(target, options = {}) {
+  const [visible, setVisible] = useState(false);
+  const callback = 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] = useState(() => {
+    if (!window) {
+      return false;
+    }
+    return window.document.hasFocus();
+  });
+  useEventListener("blur", () => {
+    setFocused(false);
+  });
+  useEventListener("focus", () => {
+    setFocused(true);
+  });
+  return focused;
+}
+
+export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useResizeObserver, useScriptTag, useScroll, useScrollLock, useSessionStorage, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useVirtualList, useWindowsFocus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "./index.cjs",
   "module": "./index.mjs",
   "types": "./index.d.ts",