Merge branch 'custom-scroll-function'

Author: rafgraph

README.md

@@ -14,7 +14,7 @@ $ yarn add react-router-hash-link
 $ npm install --save react-router-hash-link
 ```
 
-## `<HashLink>`
+### `<HashLink>`
 ```javascript
 // In YourComponent.js
 ...
@@ -25,7 +25,7 @@ import { HashLink as Link } from 'react-router-hash-link';
 ```
 
 
-## `<NavHashLink>`
+### `<NavHashLink>`
 ```javascript
 // In YourComponent.js
 ...
@@ -35,5 +35,27 @@ import { NavHashLink as NavLink } from 'react-router-hash-link';
 <NavLink
   to="/some/path#with-hash-fragment"
   activeClassName="selected"
+  // etc...
 >Link to Hash Fragment</NavLink>
 ```
+
+## Scrolling API
+### `smooth: boolean`
+- Smooth scroll to the element
+- React Router Hash Link uses the native Element method `element.scrollIntoView()` for scrolling, and when the `smooth` prop is present it will call it with the smooth option, `element.scrollIntoView({ behavior: 'smooth' })`
+- Note that not all browsers have implemented options for `scrollIntoView` - see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) and [Can I Use](https://caniuse.com/#feat=scrollintoview) - there is also a browser [polyfill for smooth scrolling](https://github.com/iamdustan/smoothscroll) which you can install separately so `smooth` will work in all browsers
+```js
+import { HashLink as Link } from 'react-router-hash-link';
+<Link smooth to="/path#hash">Link to Hash Fragment</Link>
+```
+
+### `scroll: function`
+- Custom scroll function called with the element to scroll to, e.g. `const myScrollFn = element => {...}`
+- This allows you to do things like scroll with offset, use a specific smooth scrolling library, or pass in your own options to `scrollIntoView`
+```js
+import { HashLink as Link } from 'react-router-hash-link';
+<Link
+    to="/path#hash"
+    scroll={el => el.scrollIntoView({ behavior: 'instant', block: 'end' })}
+>Link to Hash Fragment</Link>
+```

src/index.js

@@ -5,6 +5,7 @@ import { Link, NavLink } from 'react-router-dom';
 let hashFragment = '';
 let observer = null;
 let asyncTimerId = null;
+let scrollFunction = null;
 
 function reset() {
   hashFragment = '';
@@ -18,7 +19,7 @@ function reset() {
 function getElAndScroll() {
   const element = document.getElementById(hashFragment);
   if (element !== null) {
-    element.scrollIntoView();
+    scrollFunction(element);
     reset();
     return true;
   }
@@ -60,10 +61,17 @@ export function genericHashLink(props, As) {
     ) {
       hashFragment = props.to.hash.replace('#', '');
     }
-    if (hashFragment !== '') hashLinkScroll();
+    if (hashFragment !== '') {
+      scrollFunction =
+        props.scroll ||
+        (el =>
+          el.scrollIntoView(props.smooth ? { behavior: 'smooth' } : undefined));
+      hashLinkScroll();
+    }
   }
+  const { scroll, smooth, ...filteredProps } = props;
   return (
-    <As {...props} onClick={handleClick}>
+    <As {...filteredProps} onClick={handleClick}>
       {props.children}
     </As>
   );
@@ -80,6 +88,7 @@ export function NavHashLink(props) {
 const propTypes = {
   onClick: PropTypes.func,
   children: PropTypes.node,
+  scroll: PropTypes.func,
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };