react-router-scroll-async
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
;; // To show how the async behavior can be used; /* ... */ let {}; ReactDOM;
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
andy
, such as[0, 100]
, to scroll to that position - a truthy value to emulate the browser default scroll behavior
; ;
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 {}; ; // Call updateScroll when the page has completed all the async work;
window
Scrolling elements other than 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.
; { /* ... */ 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.
;
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.