homeflowjs 1.0.69 → 1.0.70

package/hooks/use-intersection-observer.js

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { isFunction } from '../utils';
+
+/**
+ * Custom hook to observe the intersection of a target element with the viewport.
+ *
+ * @param {Object} params - Parameters for the hook.
+ * @param {HTMLElement|React.RefObject} params.target - The target element or a React ref to observe.
+ * @param {IntersectionObserverInit} [params.options={}] - Options for the IntersectionObserver (e.g., root, rootMargin, threshold).
+ * @param {Function} [params.onIntersect] - Callback function to execute when the target element intersects with the viewport.
+ * 
+ * @returns {boolean} - A boolean indicating whether the target element is currently intersecting with the viewport.
+ */
+const useIntersectionObserver = ({ target, options = {}, onIntersect }) => {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  useEffect(() => {
+    if (!target) return;
+
+    let targetElement = target;
+    // If `target` is a ref, get the current DOM element
+    if (target?.current) {
+      targetElement = target.current;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const intersecting = entry.isIntersecting;
+        setIsIntersecting(intersecting);
+
+        // Call the callback if provided and isIntersecting is true
+        if (intersecting && isFunction(onIntersect)) {
+          onIntersect();
+        }
+      },
+      options
+    );
+
+    observer.observe(targetElement);
+
+    // Cleanup observer on component unmount
+    return () => {
+      observer.disconnect();
+    };
+  }, [target, options, onIntersect]);
+
+  return isIntersecting;
+};
+
+export default useIntersectionObserver;

package/hooks/use-scroll-to.hook.js

@@ -1,8 +1,8 @@
-import { useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { isFunction } from '../utils';
+import useIntersectionObserver from './use-intersection-observer';;
 
-const scrollToTarget = (target, { yOffset = 0, additionalYOffset = 0 } = {}) => {
-
+const getTargetElementHelper = (target) => {
   // If target is chunk ID
   let targetElement;
   if (!isNaN(target)) {
@@ -15,29 +15,38 @@ const scrollToTarget = (target, { yOffset = 0, additionalYOffset = 0 } = {}) =>
   if (!targetElement) targetElement = document.querySelector(`.${target}`);
   if (!targetElement) targetElement = document.querySelector(`#${target}`);
 
-  if (targetElement) {
-    let verticalOffset = 0;
-    if (typeof yOffset === 'number') {
-      verticalOffset = yOffset;
-    } else if (isFunction(yOffset)) {
-      const value = yOffset();
-      if (typeof value === 'number') {
-        verticalOffset = value;
-      }
-    }
-    if(additionalYOffset) {
-      verticalOffset = verticalOffset + parseInt(additionalYOffset, 10);
-    }
+  return targetElement;
+}
 
-    let y = 0;
-    const targetTop = targetElement.getBoundingClientRect().top;
-    if(targetTop > 0) y =
-      targetElement.getBoundingClientRect().top +
-      window.pageYOffset +
-      verticalOffset;
-    window.scrollTo({ top: y, behavior: 'smooth' });
-    history.scrollRestoration = 'manual';
+const scrollToTarget = ({ targetElement, yOffset = 0, additionalYOffset = 0 } = {}, signal) => {
+  if(!targetElement) return;  
+
+  let verticalOffset = 0;
+  if (typeof yOffset === 'number') {
+    verticalOffset = yOffset;
+  } else if (isFunction(yOffset)) {
+    const value = yOffset();
+    if (typeof value === 'number') {
+      verticalOffset = value;
+    }
   }
+  if(additionalYOffset) {
+    verticalOffset = verticalOffset + parseInt(additionalYOffset, 10);
+  }
+
+  /**
+   * Scroll to the target element
+   * Note: when using getBoundingClientRect(), the position of the div will
+   * change whenever you scroll on the page. To get the absolute position of
+   * the element on the page, not relative to the window,we need to add the
+   * number of scrolled pixels to the element’s window location using scrollY:
+   */
+  const rect = targetElement.getBoundingClientRect();
+  window.scroll({
+    top: rect.top + window.scrollY + verticalOffset,
+    behavior: 'smooth',
+    ...(signal && { signal: signal }), // This is used to abort the scroll via a trigger in the useIntersectionObserver
+  });
 };
 
 const getURLParams = (hash) => {
@@ -46,37 +55,111 @@ const getURLParams = (hash) => {
   return { target, yOffsetFromURLParams: yOffset };
 };
 
-function handleScrollToClick(options) {
-  // eslint-disable-next-line func-names
-  return function () {
-    const { target, yOffsetFromURLParams } = getURLParams(this.hash);
-    if (target) {
-      scrollToTarget(target, {
-        ...options,
-        additionalYOffset: yOffsetFromURLParams,
-      });
-    }
-  };
-}
 
+/**
+ * Custom hook that provides functionality to scroll to a specific target element
+ * on the page, either based on URL hash parameters or click events to links with
+ * href="#scroll-to?target=". It also handles layout shifts caused by lazy-loaded components
+ * using an intersection observer to ensure accurate scrolling.
+ *
+ * Features:
+ * - Scrolls to a target element specified by a URL hash or click event.
+ * - Supports additional vertical offsets (static or dynamic).
+ * - Uses an AbortController to manage and stop scrolling when necessary.
+ * - Resolves layout shift issues by re-calculating the target position using an intersection observer.
+ * - Automatically attaches click event listeners to links with href="#scroll-to?target=", 
+ *   target can either be a element id, class name or chunk id.
+ * - Handles URL navigation with scroll-to hash parameters.
+ *
+ * @param {Object} options - Configuration options for scrolling behavior.
+ * @param {number|function} [options.yOffset] - Vertical offset for scrolling. Can be a number or a function.
+ * @param {number} [options.additionalYOffset] - Additional vertical offset for scrolling.
+ */
 const useScrollTo = (options) => {
+  const [currentTarget, setCurrentTarget] = useState(null);
+  const scrollAbortControllerRef = useRef(null);
+
+  const handleScrollTo = () => {
+    const { target, yOffsetFromURLParams } = getURLParams(window.location.hash);
+    const targetElement = getTargetElementHelper(target);
+
+    if(!targetElement) return;
+
+    const targetObj = {
+      targetElement, 
+      additionalYOffset: yOffsetFromURLParams,
+      ...options,
+    }
+
+    // Update state so that the intersection observer can pick it up
+    setCurrentTarget(targetObj);
+
+    // AbortController to manage the scroll
+    const controller = new AbortController();
+    scrollAbortControllerRef.current = controller;
+
+    // Scroll to the target element;
+    scrollToTarget({ ...targetObj }, controller.signal);
+  }
+  
+  /**
+   * How this useIntersectionObserver is being used:
+   * This fixes a bug with the scrollToTarget function 
+   * where the getBoundingClientRect() method returns
+   * a different value between scroll to's. This is caused
+   * because of layout shift with lazy loaded components
+   * while scrolling.
+   * 
+   * How it works:
+   * When the scrollToTarget is fired, the useIntersectionObserver 
+   * will check if the target element is in the viewport. If it is
+   * it stops the window.scroll method in the scrollToTarget function
+   * stopping the scroll. This is done by using the AbortController.
+   * Then it scrollToTarget again, this in turn gets the most up to date
+   * getBoundingClientRect() value and scrolls to the target element.
+   * 
+   */
+  useIntersectionObserver({ 
+    target: currentTarget?.targetElement, 
+    onIntersect: () => {
+      if (scrollAbortControllerRef.current) {
+        scrollAbortControllerRef.current.abort(); // Stop the scroll
+        scrollAbortControllerRef.current = null; // Reset the controller
+        scrollToTarget({ ...currentTarget }); // Fire the scrollToTarget function again
+      }
+    }
+  });
+
+  
+  // Handle onclick scroll to events
   useEffect(() => {
+    const clickEventController = new AbortController()
     const scrollToEls = document.querySelectorAll(
       '[href*="#scroll-to"], [href*="#/scroll-to"]'
     );
+
     scrollToEls.forEach((el) => {
       el.addEventListener(
         'click',
-        handleScrollToClick(options),
+        (e) => {
+          e.preventDefault();
+          handleScrollTo();
+        },
+        { signal: clickEventController.signal }
       );
     });
 
-    const { target, yOffsetFromURLParams } = getURLParams(window.location.hash);
-    scrollToTarget(target, {
-      ...options,
-      additionalYOffset: yOffsetFromURLParams,
-    });
+    //On click element event listeners cleanup
+    return () => {
+      clickEventController.abort()
+    }
   }, []);
+
+  // Handle when a user navigates to a URL with a scroll to hash
+  useEffect(() => {
+    handleScrollTo();
+  }, [])
+
 };
 
 export default useScrollTo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.69",
+  "version": "1.0.70",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",