Custom <Prompt /> for React Router Dom

react-router-dom-custom-prompt.tsx

// Instead of using the <Prompt />'s implementation
// (which uses the browser's 'confirm()',) use your own custom component!

import React, { useState, useEffect, useRef } from 'react'
import { useHistory } from 'react-router-dom'
import { Modal } from './Modal' // your custom component

interface CustomPromptProps {
	when: boolean
	onConfirmNavigation?: () => void
}

export function CustomPrompt({
	when,
	onConfirmNavigation
}: CustomPromptProps): React.ReactElement<CustomPromptProps> | null {
	const history = useHistory()
	const [show, setShow] = useState(false)
	const completeNavigationRef = useRef((): void => {})

	useEffect((): void => {
		const unblock = history.block(({ pathname }, action): false | void => {
			if(!when) {
				unblock()
				return
			}
			setShow(true)
			completeNavigationRef.current = (): void => {
				unblock()
				if(action === 'POP') {
					history.goBack()
				} else if(action === 'PUSH') {
					history.push(pathname)
				} else if(action === 'REPLACE') {
					history.replace(pathname)
				}
			}
			return false
		})
	}, [history, when])

	return show ? (
		<Modal // your custom component
			headingText="Change page?"
			promptText="There are unsaved changes on the page. Are you sure you want to continue?"
			cancelButtonText="No, cancel"
			confirmButtonText="Yes, navigate"
			onCancel={(): void => {
				setShow(false)
			}}
			onConfirm={(): void => {
				setShow(false)
				if(onConfirmNavigation) {
					onConfirmNavigation()	
				}
				completeNavigationRef.current()
			}}
		/>
	) : null
}