scroll with react-scroll

packages/app/package.json

@@ -236,6 +236,7 @@
     "react-dropzone": "^11.2.4",
     "react-frame-component": "^4.0.0",
     "react-hotkeys": "^2.0.0",
+    "react-scroll": "^1.8.7",
     "react-use-ripple": "^1.5.2",
     "react-waypoint": "^10.1.0",
     "reactstrap": "^8.9.0",

packages/app/src/components/ReactMarkdownComponents/NextLink.tsx

@@ -1,4 +1,5 @@
 import Link, { LinkProps } from 'next/link';
+import { Link as ScrollLink } from 'react-scroll';
 
 import { useSiteUrl } from '~/stores/context';
 
@@ -25,9 +26,18 @@ export const NextLink = ({
 
   const { data: siteUrl } = useSiteUrl();
 
+  if (href == null) {
+    return <a className={className}>{children}</a>;
+  }
+
   // when href is an anchor link
-  if (href == null || isAnchorLink(href)) {
-    return <a href={href} className={className}>{children}</a>;
+  if (isAnchorLink(href)) {
+    const to = href.slice(1);
+    return (
+      <ScrollLink to={to} spy smooth="easeOutQuart" offset={-100} duration={800}>
+        <a href={href} className={className}>{children}</a>
+      </ScrollLink>
+    );
   }
 
   if (isExternalLink(href, siteUrl)) {

yarn.lock

@@ -18586,6 +18586,14 @@ react-popper@^2.2.5:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+react-scroll@^1.8.7:
+  version "1.8.7"
+  resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.8.7.tgz#8020035329efad00f03964e18aff6822137de3aa"
+  integrity sha512-fBOIwweAlhicx8RqP9tQXn/Uhd+DTtVRjw+0VBsIn1Z+MjRYLhTZ0tMoTAU1vOD3dce8mI6copexI4yWII+Luw==
+  dependencies:
+    lodash.throttle "^4.1.1"
+    prop-types "^15.7.2"
+
 react-scrolllock@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/react-scrolllock/-/react-scrolllock-1.0.9.tgz#7c9c3c0cce2ed55042af2808b6483b85b121cdcb"