Merge pull request #68 from rafgraph/v2.2

Author: rafgraph

README.md

@@ -22,25 +22,27 @@ $ npm install --save react-router-hash-link
 ```javascript
 // In YourComponent.js
 ...
-import { HashLink as Link } from 'react-router-hash-link';
+import { HashLink } from 'react-router-hash-link';
 ...
-// Use it just like a RRv4/5 <Link> (to can be a string or an object, see RRv4/5 api for details):
-<Link to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>
+// Use it just like a RRv4/5 <Link> (to can be a string or an object, see RRv4/5 api for details)
+<HashLink to="/some/path#with-hash-fragment">Link to Hash Fragment</HashLink>
 ```
 
 
 ### `<NavHashLink>`
 ```javascript
 // In YourComponent.js
 ...
-import { NavHashLink as NavLink } from 'react-router-hash-link';
+import { NavHashLink } from 'react-router-hash-link';
 ...
-// Use it just like a RRv4/5 <NavLink> (see RRv4/5 api for details):
-<NavLink
+// Use it just like a RRv4/5 <NavLink> (see RRv4/5 api for details)
+// It will be active only if both the path and hash fragment match 
+<NavHashLink
   to="/some/path#with-hash-fragment"
   activeClassName="selected"
+  activeStyle={{ color: 'red' }}
   // etc...
->Link to Hash Fragment</NavLink>
+>Link to Hash Fragment</NavHashLink>
 ```
 
 ## Scrolling API
@@ -49,22 +51,39 @@ import { NavHashLink as NavLink } from 'react-router-hash-link';
 - 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>
+import { HashLink } from 'react-router-hash-link';
+<HashLink smooth to="/path#hash">Link to Hash Fragment</HashLink>
 ```
 
 ### `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
+import { HashLink } from 'react-router-hash-link';
+<HashLink
     to="/path#hash"
     scroll={el => el.scrollIntoView({ behavior: 'instant', block: 'end' })}
->Link to Hash Fragment</Link>
+>Link to Hash Fragment</HashLink>
 ```
 
-### Custom `Link`
+### Scroll to top of page
+- To scroll to the top of the page set the hash fragment to `#` (empty) or `#top`
+- This is inline with the [HTML spec](https://html.spec.whatwg.org/multipage/browsing-the-web.html#target-element), also see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page)
+```js
+import { HashLink } from 'react-router-hash-link';
+<HashLink to="/path#top">Link to Top of Page</HashLink>
+```
+
+### Scroll with offset
+- To scroll with offset use a custom scroll function, one way of doing this can be found [here](https://github.com/rafgraph/react-router-hash-link/issues/25#issuecomment-536688104)
+
+### `elementId: string`
+- Scroll to the element with matching id
+- Used instead of providing a hash fragment as part of the `to` prop, if both are present then the `elementId` will override the `to` prop's hash fragment
+- Note that it is generally recommended to use the `to` prop's hash fragment instead of the `elementId`
+
+
+## Custom `Link`
 
 The exported components are wrapped versions of the `Link` and `NavLink` exports of react-router-dom. In some cases you may need to provide a custom `Link` implementation.
 

package.json

@@ -4,9 +4,9 @@
   "description": "Hash link scroll functionality for React Router v4/5",
   "main": "lib/index.js",
   "scripts": {
-    "build": "rm -rf lib && babel src -d lib --presets=env,react --plugins=transform-object-rest-spread",
+    "build": "rm -rf lib && babel src -d lib --presets=@babel/preset-env,@babel/preset-react",
     "prepublish": "yarn build",
-    "dev": "yarn link && babel src -d lib --watch --presets=env,react --plugins=transform-object-rest-spread"
+    "dev": "yarn link && babel src -d lib --watch --presets=@babel/preset-env,@babel/preset-react"
   },
   "files": [
     "src",
@@ -33,12 +33,17 @@
     "react-router-dom": ">=4"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1"
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
+    "prettier": "^2.1.2"
   },
   "dependencies": {
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.7.2"
+  },
+  "prettier": {
+    "trailingComma": "all",
+    "singleQuote": true
   }
 }

src/index.js

@@ -17,9 +17,33 @@ function reset() {
 }
 
 function getElAndScroll() {
-  const element = document.getElementById(hashFragment);
+  let element = null;
+  if (hashFragment === '#') {
+    element = document.body;
+  } else {
+    // check for element with matching id before assume '#top' is the top of the document
+    // see https://html.spec.whatwg.org/multipage/browsing-the-web.html#target-element
+    const id = hashFragment.replace('#', '');
+    element = document.getElementById(id);
+    if (element === null && hashFragment === '#top') {
+      element = document.body;
+    }
+  }
+
   if (element !== null) {
     scrollFunction(element);
+
+    // update focus to where the page is scrolled to
+    // unfortunately this doesn't work in safari (desktop and iOS) when blur() is called
+    let originalTabIndex = element.getAttribute('tabindex');
+    if (originalTabIndex === null) element.setAttribute('tabindex', -1);
+    element.focus({ preventScroll: true });
+    // for some reason calling blur() in safari resets the focus region to where it was previously,
+    // if blur() is not called it works in safari, but then are stuck with default focus styles
+    // on an element that otherwise might never had focus styles applied, so not an option
+    element.blur();
+    if (originalTabIndex === null) element.removeAttribute('tabindex');
+
     reset();
     return true;
   }
@@ -48,33 +72,39 @@ function hashLinkScroll(timeout) {
 
 export function genericHashLink(As) {
   return React.forwardRef((props, ref) => {
+    let linkHash = '';
+    if (typeof props.to === 'string' && props.to.includes('#')) {
+      linkHash = `#${props.to.split('#').slice(1).join('#')}`;
+    } else if (
+      typeof props.to === 'object' &&
+      typeof props.to.hash === 'string'
+    ) {
+      linkHash = props.to.hash;
+    }
+
+    const passDownProps = {};
+    if (As === NavLink) {
+      passDownProps.isActive = (match, location) =>
+        match && match.isExact && location.hash === linkHash;
+    }
+
     function handleClick(e) {
       reset();
+      hashFragment = props.elementId ? `#${props.elementId}` : linkHash;
       if (props.onClick) props.onClick(e);
-      if (typeof props.to === 'string') {
-        hashFragment = props.to
-          .split('#')
-          .slice(1)
-          .join('#');
-      } else if (
-        typeof props.to === 'object' &&
-        typeof props.to.hash === 'string'
-      ) {
-        hashFragment = props.to.hash.replace('#', '');
-      }
       if (hashFragment !== '') {
         scrollFunction =
           props.scroll ||
-          (el =>
+          ((el) =>
             props.smooth
-              ? el.scrollIntoView({ behavior: "smooth" })
+              ? el.scrollIntoView({ behavior: 'smooth' })
               : el.scrollIntoView());
         hashLinkScroll(props.timeout);
       }
     }
-    const { scroll, smooth, timeout, ...filteredProps } = props;
+    const { scroll, smooth, timeout, elementId, ...filteredProps } = props;
     return (
-      <As {...filteredProps} onClick={handleClick} ref={ref}>
+      <As {...passDownProps} {...filteredProps} onClick={handleClick} ref={ref}>
         {props.children}
       </As>
     );
@@ -90,6 +120,7 @@ const propTypes = {
   children: PropTypes.node,
   scroll: PropTypes.func,
   timeout: PropTypes.number,
+  elementId: PropTypes.string,
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };