Add <AnchorLink /> component

package.json

@@ -35,6 +35,7 @@
     "dom-form-serializer": "^1.0.7",
     "intersection-observer": "^0.5.0",
     "lodash": "^4.17.4",
+    "moveto": "^1.7.1",
     "netlify-identity-widget": "^1.2.0",
     "normalize.css": "^7.0.0",
     "react": "^16.0.0",

src/components/AnchorLink.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import MoveTo from 'moveto'
+
+const AnchorLink = ({
+  children,
+  href,
+  className = '',
+  options,
+  onClick = () => {},
+  toleranceElement // elementQuery e.g. '.Nav' – element height will be used as tolerance
+}) => {
+  const defaultOptions = {
+    tolerance: 50,
+    duration: 800,
+    easing: 'easeOutQuart'
+  }
+
+  const target = href.replace(/^\//, '')
+
+  const handleClick = e => {
+    e.preventDefault()
+    if (toleranceElement) {
+      defaultOptions.tolerance =
+        document.querySelector(toleranceElement).offsetHeight - 1
+      console.log(defaultOptions.tolerance)
+    }
+    const moveTo = new MoveTo(Object.assign(defaultOptions, options))
+    moveTo.move(document.querySelector(target))
+    if (onClick) onClick(e)
+  }
+
+  return (
+    <a href={href} className={`AnchorLink ${className}`} onClick={handleClick}>
+      {children}
+    </a>
+  )
+}
+
+AnchorLink.propTypes = {
+  href: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  options: PropTypes.object,
+  className: PropTypes.string,
+  toleranceElement: PropTypes.string
+}
+
+export default AnchorLink

yarn.lock

@@ -5315,6 +5315,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
   dependencies:
     minimist "0.0.8"
 
+moveto@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/moveto/-/moveto-1.7.1.tgz#b97847c2c6a12b88a179afd4fee0718b6851797e"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"