Adding optional delay prop

README.md

@@ -35,3 +35,6 @@ And if you use `npm`
 ```shell
 npm install react-router-scroll-top --save
 ```
+
+## Props
+ - `delay` _(number) : A delay before scroll to top function is run. Default `0`

src/ScrollToTop.js

@@ -4,6 +4,10 @@ import React, { Fragment } from "react"
 import { type Props } from "."
 
 class ScrollToTop extends React.PureComponent<Props> {
+  static defaultProps: {
+    delay: 0
+  }
+
   componentDidUpdate: (prevProps: Props) => void
 
   props: Props

src/index.js

@@ -18,16 +18,17 @@ type Location = {
 
 export type Props = {
   children?: React$Node,
-  location: Location
+  location: Location,
+  delay: number
 }
 
 export const componentDidUpdate = function componentDidUpdate(
   prevProps: Props
 ) {
-  const { location }: Props = this.props
+  const { location, delay }: Props = this.props
 
   if (location !== prevProps.location) {
-    window.scrollTo(LEFT, TOP)
+    setTimeout(() => window.scrollTo(LEFT, TOP), delay)
   }
 }
 

src/index.test.js

@@ -4,21 +4,32 @@ import { spy } from "sinon"
 const TOP = 0
 const LEFT = 0
 
+const TIMEOUTS = 1
+const NO_DELAY = 0
+const DELAY = 1000
+
+jest.useFakeTimers()
+
 describe("ScrollToTop", () => {
   describe("componentDidUpdate", () => {
     it("scrolls window to top on location update", () => {
       global.scrollTo = spy()
       const prevProps = {
-        location: "/"
+        location: "/",
       }
       const props = {
-        location: "/about"
+        location: "/about",
       }
 
       componentDidUpdate.bind({ props })(prevProps)
 
-      expect(global.scrollTo.calledOnce).toBe(true)
-      expect(global.scrollTo.calledWith(TOP, LEFT)).toBe(true)
+      setTimeout(() => {
+        expect(setTimeout).toHaveBeenCalledTimes(TIMEOUTS)
+        expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), NO_DELAY)
+
+        expect(global.scrollTo.calledOnce).toBe(true)
+        expect(global.scrollTo.calledWith(TOP, LEFT)).toBe(true)
+      }, NO_DELAY)
     })
 
     it("does not scroll window to top on same location", () => {
@@ -35,5 +46,45 @@ describe("ScrollToTop", () => {
 
       expect(global.scrollTo.calledOnce).toBe(false)
     })
+
+    it("scrolls window after given delay", () => {
+      global.scrollTo = spy()
+
+      const prevProps = {
+        location: "/"
+      }
+      const props = {
+        delay: DELAY,
+        location: "/about"
+      }
+
+      componentDidUpdate.bind({ props })(prevProps)
+
+      setTimeout(() => {
+        expect(setTimeout).toHaveBeenCalledTimes(TIMEOUTS)
+        expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), DELAY)
+
+        expect(global.scrollTo.calledOnce).toBe(true)
+        expect(global.scrollTo.calledWith(TOP, LEFT)).toBe(true)
+      }, DELAY)
+    })
+
+    it("does not scroll window immediately if given delay", () => {
+      global.scrollTo = spy()
+
+      const prevProps = {
+        location: "/"
+      }
+      const props = {
+        delay: DELAY,
+        location: "/about"
+      }
+
+      componentDidUpdate.bind({ props })(prevProps)
+
+      setTimeout(() => {
+        expect(global.scrollTo.calledOnce).toBe(false)
+      }, NO_DELAY)
+    })
   })
 })