react-router-scroll

Scroll manager for react-router v4+, built with React Hooks

Features

React Router Scroll exports several hooks with their paired components.

useScrollToTop and ScrollToTop

Window scrolls to top when pathname changes.

useScrollToTopOnMount and ScrollToTopOnMount

Window scrolls to top when a new route mounted.

useScrollRestoration and ScrollRestoration

Window will scroll to top when a new route mounted and restore previous route's scroll position when navigation back.

Install

npm install --save @lkspc/react-router-scroll

Usage

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { ScrollRestoration } from '@lkspc/react-router-scroll';

class Example extends Component {
  render() {
    return (
      <BrowserRouter>
        <ScrollRestoration />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/other" component={Other} />
        </Switch>
      </BrowserRouter>
    );
  }
}

License

MIT © lkspc