Nojira | @ericbakenhus | Add jumplink hook and wrapper (#696)

ericbakenhus · web-flow · commit 40736254ba15 · 2026-03-11T10:04:36.000-05:00
* Add jumplink hook and wrapper

* Use new fangled useEffectEvent

* Use new fangled useEffectEvent

* Wait

* Wait

* Oops

* Handle tabindex

* Validate hash
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,6 +10,7 @@ import { getGlobalAlerts, getSearchConfigBlok } from '@/utilities/data';
 import { SearchModalProvider } from '@/components/Search/Modal/SearchModalContext';
 import { MotionProvider } from '@/components/MotionProvider';
 import { GlobalAlertsProvider } from '@/components/Alert';
+import { HashLinkWrapper } from '@/components/HashLinkWrapper';
 import { getStoryblokClient } from '@/utilities/storyblok';
 
 // https://docs.fontawesome.com/web/use-with/react/use-with#getting-font-awesome-css-to-work
@@ -53,22 +54,24 @@ const RootLayout = async ({ children }: LayoutProps) => {
       <GlobalAlertsProvider globalAlerts={globalAlerts}>
         <SearchModalProvider searchConfig={searchConfig}>
           <MotionProvider>
-            <html
-              lang="en"
-              className={cnb(
-                source_sans.variable,
-                source_serif.variable,
-                stanford.variable,
-              )}
-            >
-              <GTAG />
-              {/* Absolutely necessary to have a body tag here, otherwise your components won't get any interactivity */}
-              <body>
-                <FlexBox justifyContent="between" direction="col" className="min-h-screen relative">
-                  {children}
-                </FlexBox>
-              </body>
-            </html>
+            <HashLinkWrapper>
+              <html
+                lang="en"
+                className={cnb(
+                  source_sans.variable,
+                  source_serif.variable,
+                  stanford.variable,
+                )}
+              >
+                <GTAG />
+                {/* Absolutely necessary to have a body tag here, otherwise your components won't get any interactivity */}
+                <body>
+                  <FlexBox justifyContent="between" direction="col" className="min-h-screen relative">
+                    {children}
+                  </FlexBox>
+                </body>
+              </html>
+            </HashLinkWrapper>
           </MotionProvider>
         </SearchModalProvider>
       </GlobalAlertsProvider>
diff --git a/components/HashLinkWrapper.tsx b/components/HashLinkWrapper.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { useHashLink } from '@/hooks/useHashLink';
+
+interface HashLinkWrapperProps {
+  children: React.ReactNode;
+}
+
+export const HashLinkWrapper = ({ children }: HashLinkWrapperProps) => {
+  useHashLink();
+
+  return children;
+};
diff --git a/hooks/useHashLink.ts b/hooks/useHashLink.ts
@@ -0,0 +1,31 @@
+import { useEffect, useEffectEvent } from 'react';
+
+export const useHashLink = () => {
+  const onReady = useEffectEvent(() => {
+    const hash = window?.location?.hash?.replace('#', '');
+    if (!hash) return;
+
+    // What we'd expect from Storyblok or developers
+    const isHashValidId = /^[a-zA-Z][a-zA-Z0-9_-]*$/.test(hash);
+    if (!isHashValidId) return;
+
+    const el = document?.getElementById(hash);
+    if (!el) return;
+
+    const prevTabIndex = el.getAttribute('tabindex');
+    el.setAttribute('tabindex', '-1');
+    el.scrollIntoView({ behavior: 'instant' });
+    el.focus({ preventScroll: true });
+    if (prevTabIndex) {
+      el.setAttribute('tabindex', prevTabIndex);
+    } else {
+      el.removeAttribute('tabindex');
+    }
+  });
+
+  useEffect(() => {
+    setTimeout(() => {
+      onReady();
+    }, 100);
+  }, []);
+};
