zudoku 0.1.1-dev.12 → 0.1.1-dev.14

package/src/app/util/useScrollToAnchor.ts

@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { useViewportAnchor } from "../components/context/ViewportAnchorContext.js";
+
+export const useScrollToAnchor = () => {
+  const location = useLocation();
+  const { setActiveAnchor } = useViewportAnchor();
+
+  useEffect(() => {
+    if (!location.hash) return;
+
+    const hash = location.hash.split("/")[0].slice(1);
+
+    const element = document.getElementById(decodeURIComponent(hash));
+    if (element) {
+      // on page navigation element might be in DOM but not yet scrollable, so wait for a frame
+      requestAnimationFrame(() => {
+        element.scrollIntoView();
+        requestIdleCallback(() => setActiveAnchor(hash));
+      });
+      return;
+    }
+
+    // on page load, the element might not be available yet
+    const observer = new MutationObserver((_mutations, obs) => {
+      const element = document.getElementById(decodeURIComponent(hash));
+      if (!element) return;
+
+      element.scrollIntoView();
+      requestIdleCallback(() => setActiveAnchor(hash));
+      obs.disconnect();
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return () => observer.disconnect();
+  }, [location.hash, setActiveAnchor]);
+};

package/src/app/util/useScrollToTop.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+import { useLocation } from "react-router-dom";
+
+export const useScrollToTop = () => {
+  const location = useLocation();
+  const previousPath = useRef(location.pathname);
+
+  useEffect(() => {
+    if (previousPath.current === location.pathname) return;
+    window.scrollTo(0, 0);
+    previousPath.current = location.pathname;
+  }, [location.pathname]);
+};