Security News
vlt Debuts New JavaScript Package Manager and Serverless Registry at NodeConf EU
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
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.
Note that this is for React Router v4/5, for v2/3 see this solution.
Demo website (code on the gh-pages
branch)
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.
$ yarn add react-router-hash-link
# OR
$ npm install --save react-router-hash-link
<HashLink>
// In YourComponent.js
...
import { HashLink as Link } 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>
<NavHashLink>
// In YourComponent.js
...
import { NavHashLink as NavLink } from 'react-router-hash-link';
...
// Use it just like a RRv4/5 <NavLink> (see RRv4/5 api for details):
<NavLink
to="/some/path#with-hash-fragment"
activeClassName="selected"
// etc...
>Link to Hash Fragment</NavLink>
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 as Link } from 'react-router-hash-link';
<Link smooth to="/path#hash">Link to Hash Fragment</Link>
scroll: function
const myScrollFn = element => {...}
scrollIntoView
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>
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>
);
FAQs
Hash link scroll functionality for React Router v4/5
The npm package react-router-hash-link receives a total of 133,896 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
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.