react-router-prompt 🚨

 



 



 

A Component for the react-router v7 Prompt (package renamed from react-router-dom). Allows to create more flexible dialogs.

---

Please follow Note section for more details on react-router support

✨ Demo

🏠 Homepage

Installation

$3

React-router >= 7 and shall be ideally used with data routers

``bash
pnpm add react-router-prompt
`

or with other package manager like yarn

`bash
yarn add react-router-prompt
`

Basic Usage

`jsx

{({ isActive, onConfirm, onCancel }) => (





)}

`

$3

1. when: boolean | BlockerFunction

`ts
BlockerFunction = (args: {
currentLocation: Location
nextLocation: Location
historyAction: HistoryAction
}) => boolean
`

2. beforeConfirm(nextLocation?: Location) : Promise _(Optional)_

3. beforeCancel() : Promise _(Optional)_

$3

1. isActive: Boolean
2. onConfirm(nextLocation?: Location): void
3. onCancel(): void
4. nextLocation: Location | undefined

#### Note 🗒️

This version works with react-router >=v7 and shall be ideally used with data routers

- For react-router support (v7) please install v0.8.x

- For react-router-dom support (v6.19.x - v6.28.1) please install v0.7.x

- For react-router-dom support (v6.7.x - v6.18.x) please install v0.5.4

- For react-router-dom support (v6 - v6.2.x) please install v0.3.0`

_Skipped support in middle due to breaking changes on react-router apis_

Contributing

Contributions, issues and feature requests are always welcome!
Feel free to check issues page.

Acknowledgements

- Inspiration from react-router-navigation-prompt
- Gist: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743

Support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2023 Shyam Gupta (shyamm@outlook.com)
This project is MIT licensed.

About me

- Website: sshyam-gupta.space
- Twitter: @shyamm06
- GitHub: @sshyam-gupta
- LinkedIn: @shyam-gupta-66463a62