React Router scroll management.
react-router-scroll 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.
import { applyRouterMiddleware, browserHistory, Router } from 'react-router';
import { useScroll } from 'react-router-scroll';
/* ... */
ReactDOM.render(
<Router
history={browserHistory}
routes={routes}
render={applyRouterMiddleware(useScroll())}
/>,
container
);
$ npm i -S react react-dom react-router
$ npm i -S react-router-scroll
Apply the useScroll
router middleware using applyRouterMiddleware
, as in the example above.
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
andy
, 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;
});
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';
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.
If you are not using <ScrollContainer>
, you can reduce your bundle size by importing the useScroll
module directly.
import useScroll from 'react-router-scroll/lib/useScroll';
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.