Added nextLocation to return value. (#188)

Co-authored-by: Arian Schneberger <[email protected]>

Author: samorian

README.md

@@ -56,15 +56,16 @@ yarn add react-router-prompt
    }) => boolean
    ```
 
-2. `beforeConfirm()` : `Promise<unknown>` _(Optional)_
+2. `beforeConfirm(nextLocation?: Location)` : `Promise<unknown>` _(Optional)_
 
 3. `beforeCancel()` : `Promise<unknown>` _(Optional)_
 
 ### Return values
 
 1. `isActive`: `Boolean`
-2. `onConfirm()`: `void`
+2. `onConfirm(nextLocation?: Location)`: `void`
 3. `onCancel()`: `void`
+4. `nextLocation`: `Location | undefined`
 
 #### Note 🗒️
 

src/hooks/use-confirm.ts

@@ -1,14 +1,20 @@
-import { BlockerFunction } from "react-router-dom"
+import { BlockerFunction, Location } from "react-router-dom"
 import usePrompt from "./use-prompt"
+import { useState } from "react"
 
 declare interface InitialStateType {
   isActive: boolean
   onConfirm(): void
   resetConfirmation(): void
+  nextLocation?: Location
 }
 
 const useConfirm = (when: boolean | BlockerFunction): InitialStateType => {
-  const blocker = usePrompt(when)
+  const [nextLocation, setNextLocation] = useState<Location | null>(null)
+
+  const blocker = usePrompt(when, (location) => {
+    setNextLocation(location)
+  })
 
   const resetConfirmation = () => {
     if (blocker.state === "blocked") blocker.reset()
@@ -22,6 +28,7 @@ const useConfirm = (when: boolean | BlockerFunction): InitialStateType => {
     isActive: blocker.state === "blocked",
     onConfirm,
     resetConfirmation,
+    nextLocation: nextLocation || undefined,
   }
 }
 

src/hooks/use-prompt.ts

@@ -4,6 +4,7 @@ import {
   useBlocker,
   Blocker,
   BlockerFunction,
+  Location,
 } from "react-router-dom"
 
 // You can abstract `useBlocker` to use the browser's `window.confirm` dialog to
@@ -17,13 +18,19 @@ import {
 // or the app may stay on the correct page but the browser's history stack gets
 // out of whack. You should test your own implementation thoroughly to make sure
 // the tradeoffs are right for your users.
-function usePrompt(when: boolean | BlockerFunction): Blocker {
+function usePrompt(
+  when: boolean | BlockerFunction,
+  onNavigate?: (nextLocation: Location) => void,
+): Blocker {
   const blocker = useBlocker(when)
   useEffect(() => {
+    if (blocker.state === "blocked" && blocker.location && onNavigate) {
+      onNavigate(blocker.location)
+    }
     if (blocker.state === "blocked" && !when) {
       blocker.reset()
     }
-  }, [blocker, when])
+  }, [blocker, when, onNavigate])
 
   useBeforeUnload(
     useCallback(

src/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react"
-import { BlockerFunction } from "react-router-dom"
+import { BlockerFunction, Location } from "react-router-dom"
 
 import useConfirm from "./hooks/use-confirm"
 import usePrompt from "./hooks/use-prompt"
@@ -10,9 +10,10 @@ type ReactRouterPromptProps = {
     isActive: boolean
     onCancel: () => void
     onConfirm: () => void
+    nextLocation?: Location
   }) => React.ReactNode
   beforeCancel?: () => Promise<unknown>
-  beforeConfirm?: () => Promise<unknown>
+  beforeConfirm?: (nextLocation?: Location) => Promise<unknown>
 }
 
 /**
@@ -39,7 +40,8 @@ function ReactRouterPrompt({
   beforeCancel,
   beforeConfirm,
 }: ReactRouterPromptProps) {
-  const { isActive, onConfirm, resetConfirmation } = useConfirm(when)
+  const { isActive, onConfirm, resetConfirmation, nextLocation } =
+    useConfirm(when)
 
   const onConfirmAction = useCallback(async () => {
     if (beforeConfirm) await beforeConfirm()
@@ -58,6 +60,7 @@ function ReactRouterPrompt({
           isActive: true,
           onConfirm: onConfirmAction,
           onCancel: onResetAction,
+          nextLocation: nextLocation || undefined,
         })}
       </>
     )