react-router-scroll-async

0.5.1 • Public • Published

react-router-scroll-async Travis npm

React Router scroll management.

react-router-scroll-async is a React Router middleware that adds scroll management using scroll-behavior. By default, the middleware adds browser-style scroll behavior, but you can customize it to scroll however you want on route transitions.

This is a fork of react-router-scroll that adds a way to manage async transitions.

Usage

import { applyRouterMiddleware, browserHistory, Router } from 'react-router';
import { useScroll } from 'react-router-scroll-async';
 
// To show how the async behavior can be used
import { useRedial } from 'react-router-redial';
 
/* ... */
 
let updateScroll = () => {};
 
ReactDOM.render(
  <Router
    history={browserHistory}
    routes={routes}
    render={applyRouterMiddleware(
      useScroll({
        updateScroll: (cb) => updateScroll = cb,
      }),
      useRedial({
        onCompleted: (type) => type === 'beforeTransition' && updateScroll(),
      })
    )}
  />,
  container
);

Guide

Installation

$ npm i -S react react-dom react-router
$ npm i -S react-router-scroll-async

Basic usage

Apply the useScroll router middleware using applyRouterMiddleware, as in the example above.

Custom scroll behavior

You can provide a custom shouldUpdateScroll callback as an argument to useScroll. This callback is called with the previous and the current router props.

The callback can return:

  • a falsy value to suppress updating the scroll position
  • a position array of x and y, such as [0, 100], to scroll to that position
  • a truthy value to emulate the browser default scroll behavior
useScroll((prevRouterProps, { location }) => (
  prevRouterProps && location.pathname !== prevRouterProps.location.pathname
));
 
useScroll((prevRouterProps, { routes }) => {
  if (routes.some(route => route.ignoreScrollBehavior)) {
    return false;
  }
 
  if (routes.some(route => route.scrollToTop)) {
    return [0, 0];
  }
 
  return true;
});

Async transitions

Different from react-router-scroll.

You can define a callback that should be called when the page is ready to be updated with a new scroll position. This is valuable when using React Router with middlewares such as react-router-redial.

To use this feature the argument to useScroll changes to an object as shown here.

let updateScroll = () => {};
 
useScroll({
  shouldUpdateScroll: (prevRouterProps, { location }) => (
    prevRouterProps && location.pathname !== prevRouterProps.location.pathname
  ),
  updateScroll: (cb) => updateScroll = cb,
});
 
// Call updateScroll when the page has completed all the async work
updateScroll();

Scrolling elements other than window

Use <ScrollContainer> in components rendered by a router with the useScroll middleware to manage the scroll behavior of elements other than window. Each <ScrollContainer> must be given a unique scrollKey, and can be given an optional shouldUpdateScroll callback that behaves as above.

import { ScrollContainer } from 'react-router-scroll-async';
 
function Page() {
  /* ... */
 
  return (
    <ScrollContainer
      scrollKey={scrollKey}
      shouldUpdateScroll={shouldUpdateScroll}
    >
      <MyScrollableComponent />
    </ScrollContainer>
  );
}

<ScrollContainer> does not support on-the-fly changes to scrollKey or to the DOM node for its child.

Notes

Minimizing bundle size

If you are not using <ScrollContainer>, you can reduce your bundle size by importing the useScroll module directly.

import useScroll from 'react-router-scroll-async/lib/useScroll';

Server rendering

Do not apply the useScroll middleware when rendering on a server. You may use <ScrollContainer> in server-rendered components; it will do nothing when rendering on a server.

Package Sidebar

Install

npm i react-router-scroll-async

Weekly Downloads

2

Version

0.5.1

License

MIT

Last publish

Collaborators

  • dlmr