A component for the react-router 6
Prompt
. Allows to create more flexible dialogs.
✨ Demo
🏠 Homepage
React-router-dom >= 6.19 and can be used only with data routers
pnpm add react-router-prompt
or with other package manager like yarn
yarn add react-router-prompt
<ReactRouterPrompt when={isDirty}>
{({ isActive, onConfirm, onCancel }) => (
<Modal show={isActive}>
<div>
<p>Do you really want to leave?</p>
<button onClick={onCancel}>Cancel</button>
<button onClick={onConfirm}>Ok</button>
</div>
</Modal>
)}
</ReactRouterPrompt>
-
when
:boolean
|BlockerFunction
BlockerFunction = (args: { currentLocation: Location nextLocation: Location historyAction: HistoryAction }) => boolean
-
beforeConfirm()
:Promise<unknown>
(Optional) -
beforeCancel()
:Promise<unknown>
(Optional)
-
isActive
:Boolean
-
onConfirm()
:void
-
onCancel()
:void
This version works with react-router-dom >=v6.19 Should be used within data routers
For react-router support (v6 - v6.2.x)
please install v0.3.0
For react-router support (v6.7.x - v6.18.x) please install v0.5.4
Skipped support in middle due to breaking changes on react-router apis
Contributions, issues and feature requests are always welcome! Feel free to check issues page.
- Inspiration from react-router-navigation-prompt
- Gist: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743
Give a ⭐️ if this project helped you!
Copyright © 2023 Shyam Gupta (shyamm@outlook.com) This project is MIT licensed.
- Website: sshyam-gupta.space
- Twitter: @shyamm06
- GitHub: @sshyam-gupta
- LinkedIn: @shyam-gupta-66463a62