npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-router-hash-link

v2.4.3

Published

Hash link scroll functionality for React Router v4/5

Downloads

795,963

Readme

React Router Hash Link

npm npm bundle size (version)

This is a solution to React Router's issue of not scrolling to #hash-fragments when using the <Link> component to navigate.

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.


Live demo app for React Router Hash Link

Code is in the /demo folder, or open the demo in CodeSandbox


Basics

npm install --save react-router-hash-link

react-router-dom is a peer dependency.


<HashLink>

import { HashLink } from 'react-router-hash-link';

...

// use it just like a RRv4/5 <Link>
// the `to` prop 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>

import { NavHashLink } from 'react-router-hash-link';

...

// 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</NavHashLink>

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 and Can I Use - there is also a browser polyfill for smooth scrolling which you can install separately so smooth will work in all browsers
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
import { HashLink } from 'react-router-hash-link';

...

<HashLink
  to="/path#hash"
  scroll={(el) => el.scrollIntoView({ behavior: 'auto', block: 'end' })}
>
  Link to Hash Fragment
</HashLink>;

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, also see MDN
import { HashLink } from 'react-router-hash-link';

...

<HashLink to="/path#top">Link to Top of Page</HashLink>
// or
<HashLink to="#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

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.

For example, the gatsby static site generator requires you to use its implementation of Link. You can wrap it with the genericHashLink function of this package.

import { genericHashLink } from 'react-router-hash-link';
import GatsbyLink from 'gatsby-link';

const MyHashLink = genericHashLink(GatsbyLink);

const MyComponent = () => (
  <div>
    The default wont work for you?
    <MyHashLink to="/faq#how-to-use-custom-link">No problem!</MyHashLink>
  </div>
);

Focus Management

react-router-hash-link attempts to recreate the native browser focusing behavior as closely as possible.

The browser native behavior when clicking a hash link is:

  • If the target element is not focusable, then focus is moved to the target element, but the target element is not focused.
  • If the target element is focusable (interactive elements and elements with a tabindex), then the target element is focused.

To recreate this react-router-hash-link does the following:

  • For non-focusable elements, it calls element.focus() followed by element.blur() (using a temporary tabindex to ensure that the element can be focused programmatically) so that focus moves to the target element but does not remain on it or trigger any style changes.
  • For focusable elements, it calls element.focus() and leaves focus on the target element.

Note that you may find it useful to leave focus on non-interactive elements (by adding a tabindex of -1) to augment the navigation action with a visual focus indicator.