React Router scroll management.
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-scrollApply the useScroll router middleware, as in the example above.
You can provide a custom shouldUpdateScroll callback as an argument to useScroll. This callback is called with both the previous and the current router props.
You can return:
- a falsy value to suppress the scroll update
- a position array such as
[0, 100]to scroll to that position - a truthy value to get normal 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;
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent