Add createScrollBehavior hook

Author: taion

README.md

@@ -66,6 +66,15 @@ useScroll((prevRouterProps, { routes }) => {
 });
 ```
 
+You can customize `useScroll` even further by providing a configuration object with a `createScrollBehavior` callback that creates the scroll behavior object. This allows using a custom subclass of `ScrollBehavior` from scroll-behavior with custom logic. When using a configuration object, you can specify the `shouldUpdateScroll` callback as above under the `shouldUpdateScroll` key.
+
+```js
+useScroll({
+  createScrollBehavior: (config) => new MyScrollBehavior(config),
+  shouldUpdateScroll,
+});
+```
+
 ### 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.

src/ScrollBehaviorContext.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import ScrollBehavior from 'scroll-behavior';
 
 import StateStorage from './StateStorage';
 
 const propTypes = {
   shouldUpdateScroll: PropTypes.func,
+  createScrollBehavior: PropTypes.func.isRequired,
   routerProps: PropTypes.object.isRequired,
   children: PropTypes.element.isRequired,
 };
@@ -21,7 +21,7 @@ class ScrollBehaviorContext extends React.Component {
     const { routerProps } = props;
     const { router } = routerProps;
 
-    this.scrollBehavior = new ScrollBehavior({
+    this.scrollBehavior = props.createScrollBehavior({
       addTransitionHook: router.listenBefore,
       stateStorage: new StateStorage(router),
       getCurrentLocation: () => this.props.routerProps.location,

src/useScroll.js

@@ -1,12 +1,34 @@
 import React from 'react';
+import ScrollBehavior from 'scroll-behavior';
 
 import ScrollBehaviorContext from './ScrollBehaviorContext';
 
-export default function useScroll(shouldUpdateScroll) {
+function defaultCreateScrollBehavior(config) {
+  return new ScrollBehavior(config);
+}
+
+export default function useScroll(shouldUpdateScrollOrConfig) {
+  let shouldUpdateScroll;
+  let createScrollBehavior;
+
+  if (
+    !shouldUpdateScrollOrConfig ||
+    typeof shouldUpdateScrollOrConfig === 'function'
+  ) {
+    shouldUpdateScroll = shouldUpdateScrollOrConfig;
+    createScrollBehavior = defaultCreateScrollBehavior;
+  } else {
+    ({
+      shouldUpdateScroll,
+      createScrollBehavior = defaultCreateScrollBehavior,
+    } = shouldUpdateScrollOrConfig);
+  }
+
   return {
     renderRouterContext: (child, props) => (
       <ScrollBehaviorContext
         shouldUpdateScroll={shouldUpdateScroll}
+        createScrollBehavior={createScrollBehavior}
         routerProps={props}
       >
         {child}

test/run.js

@@ -1,6 +1,6 @@
 export function delay(cb) {
   // Give throttled scroll listeners time to settle down.
-  setTimeout(cb, 80);
+  setTimeout(cb, 60);
 }
 
 export default function run(steps) {

test/useScroll.test.js

@@ -5,6 +5,7 @@ import createHashHistory from 'history/lib/createHashHistory';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { applyRouterMiddleware, Router, useRouterHistory } from 'react-router';
+import ScrollBehavior from 'scroll-behavior';
 
 import StateStorage from '../src/StateStorage';
 import useScroll from '../src/useScroll';
@@ -144,6 +145,74 @@ describe('useScroll', () => {
               container,
             );
           });
+
+          it('should support a custom scroll behavior factory', (done) => {
+            class MyScrollBehavior extends ScrollBehavior {
+              scrollToTarget() {
+                window.scrollTo(0, 50);
+              }
+            }
+
+            const steps = [
+              () => {
+                history.push('/page2');
+              },
+              () => {
+                expect(scrollTop(window)).to.equal(50);
+
+                done();
+              },
+            ];
+
+            ReactDOM.render(
+              <Router
+                history={history}
+                routes={routes}
+                render={applyRouterMiddleware(useScroll({
+                  createScrollBehavior: config => new MyScrollBehavior(config),
+                }))}
+                onUpdate={run(steps)}
+              />,
+              container,
+            );
+          });
+
+          it('should support fully custom behavior', (done) => {
+            class MyScrollBehavior extends ScrollBehavior {
+              scrollToTarget(element, target) {
+                element.scrollTo(20, target[1] + 10);
+              }
+            }
+
+            function shouldUpdateScroll() {
+              return [0, 50];
+            }
+
+            const steps = [
+              () => {
+                history.push('/page2');
+              },
+              () => {
+                expect(scrollLeft(window)).to.equal(20);
+                expect(scrollTop(window)).to.equal(60);
+
+                done();
+              },
+            ];
+
+            ReactDOM.render(
+              <Router
+                history={history}
+                routes={routes}
+                render={applyRouterMiddleware(useScroll({
+                  createScrollBehavior: config => new MyScrollBehavior(config),
+                  shouldUpdateScroll,
+                }))}
+                onUpdate={run(steps)}
+              />,
+              container,
+            );
+          });
         });
       });
     });