rsr

react-scroll-restoration

The smooth scroll restoration with react-router v4/v5

Showing:

Popularity

Downloads/wk

403

GitHub Stars

16

Maintenance

Last Commit

3mos ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-scroll-restoration

With React Router v4 & v5, the smooth scroll restoration in SPA

Why need Scroll Restoration?

I experiencing some problems with scroll positions on the back button (History Popstate) when using react-router.

In a single page application (SPA), the application manipulates the browser history and DOM to simulate navigation. Because navigation is simulated and rendering is dynamic, the usual browser behavior of restoring scroll position when navigating back and forth through the history is not generally functional

React Router does not provide out of the box support for scroll restoration and as it currently stands they won't either, because browsers are implementing some automatic scroll behavior

history.scrollRestoration API is just a way of disabling the browser's automatic attempts at scroll restoration, which mostly don't work for SPA

Install

# yarn
yarn add react-scroll-restoration

# npm
npm install react-scroll-restoration

Usage

import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';

import ScrollRestoration from 'react-scroll-restoration'

function App() {
  return (
    <Router>
      <ScrollRestoration />
      <Switch>
        <Route />
        <Route />
      </Switch>
    </Router>
  );
}

Reference

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
admond7 Ratings0 Reviews
8 months ago