gatsby-react-router-scroll

What is gatsby-react-router-scroll?

The gatsby-react-router-scroll package is designed to manage scroll behavior in Gatsby applications. It provides a way to control how the page scrolls when navigating between routes, ensuring a smooth user experience.

What are gatsby-react-router-scroll's main functionalities?

Scroll Restoration

This feature allows you to wrap your Router component with ScrollContext to enable scroll restoration. This means that when users navigate back to a previous page, the scroll position will be restored to where they left off.

import { Router } from '@reach/router';
import { ScrollContext } from 'gatsby-react-router-scroll';

const App = () => (
  <ScrollContext>
    <Router>
      <Home path="/" />
      <About path="/about" />
    </Router>
  </ScrollContext>
);

Custom Scroll Behavior

This feature allows you to define custom scroll behavior by passing a function to the scrollBehavior prop of ScrollContext. This function can be used to customize how the scroll position is handled when navigating between routes.

import { Router } from '@reach/router';
import { ScrollContext } from 'gatsby-react-router-scroll';

const customScrollBehavior = ({ routerProps: { location }, getSavedScrollPosition }) => {
  const savedPosition = getSavedScrollPosition(location);
  window.scrollTo(...(savedPosition || [0, 0]));
};

const App = () => (
  <ScrollContext scrollBehavior={customScrollBehavior}>
    <Router>
      <Home path="/" />
      <About path="/about" />
    </Router>
  </ScrollContext>
);

Other packages similar to gatsby-react-router-scroll

react-router-scroll

The react-router-scroll package provides similar functionality for managing scroll behavior in applications using React Router. It allows you to control scroll position when navigating between routes, but it is not specifically tailored for Gatsby applications.

react-scroll

The react-scroll package offers a different approach by providing tools to animate scrolling to different parts of the page. While it doesn't manage scroll restoration between routes, it is useful for creating smooth scrolling effects within a single page.

react-router-dom

The react-router-dom package includes basic scroll management features, such as the ability to scroll to the top of the page on route change. However, it lacks the advanced scroll restoration and custom scroll behavior features provided by gatsby-react-router-scroll.

README

gatsby-react-router-scroll

React Router scroll management forked from https://github.com/ytase/react-router-scroll for Gatsby which itself was forked to upgrade to RR v4 from Jimmy Jia's original scroll management library for React Router 2/3.

This has been modified now to be compatible with @reach/router.