From 56e3cd5eaadadc1d7ad1d03a984895fa71be6f15 Mon Sep 17 00:00:00 2001 From: Jimmy Jia Date: Fri, 9 Mar 2018 20:29:40 -0500 Subject: [PATCH] Allow customizing creation of scroll behavior --- README.md | 22 ++++++++++++++++++++++ src/ScrollManager.js | 10 ++++++++-- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index eab1961..e5b1c74 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,28 @@ const shouldUpdateScrollByRoute = (prevRenderArgs, { routes }) => { return true; }; + +const render = renderArgs => ( + + {/* ... */} + +); +``` + +You can customize `` even further by providing 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 custom `createScrollBehavior` callback, you can continue to specify the `shouldUpdateScroll` callback as above. + +```js +const render = renderArgs => ( + new MyScrollBehavior(config)} + renderArgs={renderArgs} + > + {/* ... */} + +); ``` [npm-badge]: https://img.shields.io/npm/v/found-scroll.svg diff --git a/src/ScrollManager.js b/src/ScrollManager.js index a30ccf6..90fb4b0 100644 --- a/src/ScrollManager.js +++ b/src/ScrollManager.js @@ -8,6 +8,7 @@ const STORAGE_NAMESPACE = '@@scroll'; const propTypes = { shouldUpdateScroll: PropTypes.func, + createScrollBehavior: PropTypes.func.isRequired, renderArgs: PropTypes.shape({ location: PropTypes.object.isRequired, router: routerShape.isRequired, @@ -15,14 +16,18 @@ const propTypes = { children: PropTypes.element, }; +const defaultProps = { + createScrollBehavior: config => new ScrollBehavior(config), +}; + class ScrollManager extends React.Component { constructor(props, context) { super(props, context); - const { renderArgs } = props; + const { createScrollBehavior, renderArgs } = props; const { router } = renderArgs; - this.scrollBehavior = new ScrollBehavior({ + this.scrollBehavior = createScrollBehavior({ addTransitionHook: router.addTransitionHook, stateStorage: new StateStorage(router, STORAGE_NAMESPACE), getCurrentLocation: () => this.props.renderArgs.location, @@ -65,5 +70,6 @@ class ScrollManager extends React.Component { } ScrollManager.propTypes = propTypes; +ScrollManager.defaultProps = defaultProps; export default ScrollManager;