feat: disable scrolling to the top of the page

docs/flareact-link.md

@@ -58,3 +58,27 @@ export default function Index() {
   );
 }
 ```
+
+## Scroll
+
+The default behaviour of the Link component is to scroll to the top of the page.
+When there's a hash defined, it will scroll to the specific ID.
+
+This feature is useful for a layered component where each tab needs to update the route.
+By default, the scroll would go to the top of the page, but the correct behaviour is to update the route and change the tab's content.
+
+You can disable this behaviour by passing a `false` value to `scroll`:
+
+```js
+import Link from "flareact/link";
+
+export default function Index() {
+  return (
+    <div>
+      <Link href="/about" scroll={false}>
+        <a>Change route without scrolling top</a>
+      </Link>
+    </div>
+  );
+}
+```

src/link.js

@@ -1,4 +1,5 @@
 import React, { Children, useEffect, useState } from "react";
+
 import { useRouter } from "./router";
 
 let prefetched = {};
@@ -15,7 +16,7 @@ export default function Link(props) {
   const [childElm, setChildElm] = useState();
   const child = Children.only(props.children);
 
-  const { href, as } = props;
+  const { href, as, scroll = true } = props;
 
   const shouldPrefetch = props.prefetch !== false;
 
@@ -54,7 +55,7 @@ export default function Link(props) {
 
     e.preventDefault();
 
-    router.push(href, as);
+    router.push(href, as, scroll);
   }
 
   const childProps = {

src/router.js

@@ -1,6 +1,7 @@
-import React, { useContext, useState, useEffect, useMemo } from "react";
-import { extractDynamicParams } from "./utils";
+import React, { useContext, useEffect, useMemo, useState } from "react";
+
 import { DYNAMIC_PAGE } from "./worker/pages";
+import { extractDynamicParams } from "./utils";
 
 const RouterContext = React.createContext();
 
@@ -13,9 +14,12 @@ export function RouterProvider({
   initialComponent,
   pageLoader,
 }) {
-  const { protocol, host, pathname: initialPathname, search } = new URL(
-    initialUrl
-  );
+  const {
+    protocol,
+    host,
+    pathname: initialPathname,
+    search,
+  } = new URL(initialUrl);
   const [route, setRoute] = useState({
     href: initialPagePath,
     asPath: initialPathname + search,
@@ -45,17 +49,20 @@ export function RouterProvider({
   }, [protocol, host, route.asPath, params]);
 
   useEffect(() => {
-    // On initial page load, replace history state with format expected by router 
+    // On initial page load, replace history state with format expected by router
     window.history.replaceState(route, null, route.asPath);
-  }, [])
+  }, []);
 
   useEffect(() => {
     async function loadNewPage() {
-      const { href, asPath } = route;
+      const { href, asPath, scroll } = route;
       const pagePath = normalizePathname(href);
       const normalizedAsPath = normalizePathname(asPath);
 
-      if (!pageCache[normalizedAsPath] || hasPagePropsExpired(pageCache[normalizedAsPath].expiry)) {
+      if (
+        !pageCache[normalizedAsPath] ||
+        hasPagePropsExpired(pageCache[normalizedAsPath].expiry)
+      ) {
         const page = await pageLoader.loadPage(pagePath);
         const { pageProps } = await pageLoader.loadPageProps(normalizedAsPath);
         const revalidateSeconds = getRevalidateValue(pageProps);
@@ -69,7 +76,9 @@ export function RouterProvider({
       }
 
       setComponent(pageCache[normalizedAsPath]);
-      setTimeout(() => scrollToHash(asPath), 0);
+      if (scroll) {
+        setTimeout(() => scrollToHash(asPath), 0);
+      }
     }
 
     if (initialPath === route.asPath) {
@@ -83,8 +92,8 @@ export function RouterProvider({
     if (seconds === null) {
       return null;
     }
-  
-    return Date.now() + (seconds * 1000);
+
+    return Date.now() + seconds * 1000;
   }
 
   function hasPagePropsExpired(expiry) {