Merge branch 'nav-hash-link'

Author: rafgraph

README.md

@@ -9,14 +9,31 @@ This is a solution to [React Router's issue of not scrolling to `#hash-fragments
 When you click on a link created with `react-router-hash-link` it will scroll to the element on the page with the `id` that matches the `#hash-fragment` in the link. This will also work for elements that are created after an asynchronous data load. Note that you must use React Router's `BrowserRouter` for this to work.
 
 ```shell
+$ yarn add react-router-hash-link
+# OR
 $ npm install --save react-router-hash-link
 ```
 
+## `<HashLink>`
 ```javascript
 // In YourComponent.js
 ...
 import { HashLink as Link } from 'react-router-hash-link';
 ...
-// Use it just like a RRv4 link (to can be a string or an object, see RRv4 api for details):
+// Use it just like a RRv4 <Link> (to can be a string or an object, see RRv4 api for details):
 <Link to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>
 ```
+
+
+## `<NavHashLink>`
+```javascript
+// In YourComponent.js
+...
+import { NavHashLink as NavLink } from 'react-router-hash-link';
+...
+// Use it just like a RRv4 <NavLink> (see RRv4 api for details):
+<NavLink
+  to="/some/path#with-hash-fragment"
+  activeClassName="selected"
+>Link to Hash Fragment</NavLink>
+```

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 let hashFragment = '';
 let observer = null;
@@ -41,7 +41,7 @@ function hashLinkScroll() {
   }, 0);
 }
 
-export function HashLink(props) {
+export function genericHashLink(props, As) {
   function handleClick(e) {
     reset();
     if (props.onClick) props.onClick(e);
@@ -52,14 +52,25 @@ export function HashLink(props) {
     }
     if (hashFragment !== '') hashLinkScroll();
   }
-  return <Link {...props} onClick={handleClick}>{props.children}</Link>;
+  return <As {...props} onClick={handleClick}>{props.children}</As>;
+}
+
+export function HashLink(props) {
+  return genericHashLink(props, Link);
 }
 
-HashLink.propTypes = {
+export function NavHashLink(props) {
+  return genericHashLink(props, NavLink);
+}
+
+const propTypes = {
   onClick: PropTypes.func,
   children: PropTypes.node,
   to: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object,
   ]),
 };
+
+HashLink.propTypes = propTypes;
+NavHashLink.propTypes = propTypes;