main 🧊 add use size, delete duplicate hook observer

Author: debabin

packages/core/src/bundle/hooks/sensors.js

@@ -4,8 +4,6 @@ export * from './useDeviceOrientation/useDeviceOrientation';
 export * from './useDevicePixelRatio/useDevicePixelRatio';
 export * from './useDocumentEvent/useDocumentEvent';
 export * from './useDocumentVisibility/useDocumentVisibility';
-export * from './useElementSize/useElementSize';
-export * from './useElementVisibility/useElementVisibility';
 export * from './useEventListener/useEventListener';
 export * from './useHotkeys/useHotkeys';
 export * from './useIdle/useIdle';
@@ -28,6 +26,7 @@ export * from './useResizeObserver/useResizeObserver';
 export * from './useScroll/useScroll';
 export * from './useScrollIntoView/useScrollIntoView';
 export * from './useScrollTo/useScrollTo';
+export * from './useSize/useSize';
 export * from './useTextSelection/useTextSelection';
 export * from './useVisibility/useVisibility';
 export * from './useWindowEvent/useWindowEvent';

packages/core/src/bundle/hooks/useSize/useSize.js

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { isTarget } from '@/utils/helpers';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+import { useRefState } from '../useRefState/useRefState';
+/**
+ * @name useSize
+ * @description - Hook that observes and returns the width and height of element
+ * @category Elements
+ * @usage low
+ *
+ * @overload
+ * @param {HookTarget} target The target element to observe
+ * @returns {UseSizeReturn} An object containing the resize observer, current width and height of the element
+ *
+ * @example
+ * const { value, observer } = useSize(ref);
+ *
+ * @overload
+ * @template Target The target element type
+ * @returns { { ref: StateRef<Target> } & UseSizeReturn } An object containing the resize observer, current width and height of the element
+ *
+ * @example
+ * const { ref, value, observer } = useSize();
+ */
+export const useSize = (...params) => {
+  const target = params[0];
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [observer, setObserver] = useState();
+  const internalRef = useRefState();
+  useIsomorphicLayoutEffect(() => {
+    const element = target ? isTarget.getElement(target) : internalRef.current;
+    if (!element) return;
+    const { width, height } = element.getBoundingClientRect();
+    setSize({
+      width,
+      height
+    });
+    const observer = new ResizeObserver(() => {
+      const { width, height } = element.getBoundingClientRect();
+      setSize({ width, height });
+    });
+    setObserver(observer);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [internalRef.state, target && isTarget.getRawElement(target)]);
+  if (target) return { observer, value: size };
+  return {
+    observer,
+    ref: internalRef,
+    value: size
+  };
+};

packages/core/src/bundle/hooks/useVisibility/useVisibility.js

@@ -58,6 +58,7 @@ export const useVisibility = (...params) => {
   const enabled = options?.enabled ?? true;
   const [observer, setObserver] = useState();
   const [entry, setEntry] = useState();
+  const inView = entry?.isIntersecting ?? false;
   const internalRef = useRefState();
   const internalCallbackRef = useRef(callback);
   internalCallbackRef.current = callback;
@@ -67,9 +68,11 @@ export const useVisibility = (...params) => {
     if (!element) return;
     const observer = new IntersectionObserver(
       (entries, observer) => {
-        const entry = entries.pop();
-        setEntry(entry);
-        internalCallbackRef.current?.(entry, observer);
+        const firstEntry = entries[0];
+        if (firstEntry) {
+          setEntry(firstEntry);
+          internalCallbackRef.current?.(firstEntry, observer);
+        }
       },
       {
         ...options,
@@ -89,11 +92,11 @@ export const useVisibility = (...params) => {
     options?.root,
     enabled
   ]);
-  if (target) return { observer, entry, inView: !!entry?.isIntersecting };
+  if (target) return { observer, entry, inView };
   return {
     observer,
     ref: internalRef,
     entry,
-    inView: !!entry?.isIntersecting
+    inView
   };
 };

packages/core/src/hooks/sensors.ts

@@ -4,8 +4,6 @@ export * from './useDeviceOrientation/useDeviceOrientation';
 export * from './useDevicePixelRatio/useDevicePixelRatio';
 export * from './useDocumentEvent/useDocumentEvent';
 export * from './useDocumentVisibility/useDocumentVisibility';
-export * from './useElementSize/useElementSize';
-export * from './useElementVisibility/useElementVisibility';
 export * from './useEventListener/useEventListener';
 export * from './useHotkeys/useHotkeys';
 export * from './useIdle/useIdle';
@@ -28,6 +26,7 @@ export * from './useResizeObserver/useResizeObserver';
 export * from './useScroll/useScroll';
 export * from './useScrollIntoView/useScrollIntoView';
 export * from './useScrollTo/useScrollTo';
+export * from './useSize/useSize';
 export * from './useTextSelection/useTextSelection';
 export * from './useVisibility/useVisibility';
 export * from './useWindowEvent/useWindowEvent';