Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
react-router-hash-link
Advanced tools
The react-router-hash-link package is a utility for React Router that allows you to link to specific sections within a page using hash links. It provides smooth scrolling and ensures that the target element is brought into view.
Hash Link Navigation
This feature allows you to create links that navigate to specific sections of the page using hash links. The 'smooth' prop enables smooth scrolling to the target section.
import { HashLink as Link } from 'react-router-hash-link';
function App() {
return (
<div>
<nav>
<Link smooth to="#section1">Go to Section 1</Link>
<Link smooth to="#section2">Go to Section 2</Link>
</nav>
<div id="section1" style={{ height: '100vh' }}>Section 1</div>
<div id="section2" style={{ height: '100vh' }}>Section 2</div>
</div>
);
}
Custom Scroll Behavior
This feature allows you to define custom scroll behavior when navigating to a hash link. The 'scroll' prop accepts a function that defines how the scrolling should be handled.
import { HashLink as Link } from 'react-router-hash-link';
const customScroll = (el) => {
el.scrollIntoView({ behavior: 'smooth', block: 'end' });
};
function App() {
return (
<div>
<nav>
<Link to="#section1" scroll={customScroll}>Go to Section 1</Link>
<Link to="#section2" scroll={customScroll}>Go to Section 2</Link>
</nav>
<div id="section1" style={{ height: '100vh' }}>Section 1</div>
<div id="section2" style={{ height: '100vh' }}>Section 2</div>
</div>
);
}
The react-scroll package provides smooth scrolling functionality for React applications. It allows you to create links that scroll to specific elements on the page. Unlike react-router-hash-link, react-scroll is not tied to React Router and can be used independently.
The react-anchor-link-smooth-scroll package offers smooth scrolling to anchor links within a React application. It is similar to react-router-hash-link but does not require React Router and can be used with any routing solution or even without a router.
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.
Code is in the /demo
folder, or open the demo in CodeSandbox
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>
smooth: boolean
element.scrollIntoView()
for scrolling, and when the smooth
prop is present it will call it with the smooth option, element.scrollIntoView({ behavior: 'smooth' })
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 browsersimport { HashLink } from 'react-router-hash-link';
...
<HashLink smooth to="/path#hash">
Link to Hash Fragment
</HashLink>;
scroll: function
const myScrollFn = element => {...}
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>;
#
(empty) or #top
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>
elementId: string
to
prop, if both are present then the elementId
will override the to
prop's hash fragmentto
prop's hash fragment instead of the elementId
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>
);
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:
tabindex
), then the target element is focused.To recreate this react-router-hash-link
does the following:
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.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.
FAQs
Hash link scroll functionality for React Router v4/5
The npm package react-router-hash-link receives a total of 116,288 weekly downloads. As such, react-router-hash-link popularity was classified as popular.
We found that react-router-hash-link demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.