https://github.com/sshyam-gupta/react-router-prompt
A replacement component for the react-router 6+ `Prompt`. Allows for more flexible dialogs.
https://github.com/sshyam-gupta/react-router-prompt
hacktoberfest prompt react-prompt react-router react-router-dom-v6 react-router-v6
Last synced: 17 days ago
JSON representation
A replacement component for the react-router 6+ `Prompt`. Allows for more flexible dialogs.
- Host: GitHub
- URL: https://github.com/sshyam-gupta/react-router-prompt
- Owner: sshyam-gupta
- License: mit
- Created: 2022-03-14T13:59:41.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-11T19:34:27.000Z (17 days ago)
- Last Synced: 2025-04-11T20:33:52.779Z (17 days ago)
- Topics: hacktoberfest, prompt, react-prompt, react-router, react-router-dom-v6, react-router-v6
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-router-prompt-example-react-router-6-7-y9ug7z?file=/src/App.js
- Size: 787 KB
- Stars: 78
- Watchers: 1
- Forks: 17
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-router-prompt 🚨
A Component for the react-router-dom 6 / react-router 7 Prompt. Allows to create more flexible dialogs.
Please follow [Note section](https://github.com/sshyam-gupta/react-router-prompt#note) for more details on react-router support
## ✨ [Demo](https://codesandbox.io/s/react-router-prompt-example-react-router-6-7-y9ug7z?file=/src/App.js)
## 🏠 [Homepage](https://github.com/sshyam-gupta/react-router-prompt#readme)
## Installation
### Prerequisite
**React-router-dom >= 7** and shall be ideally used with [**data routers**](https://reactrouter.com/6.28.1/routers/picking-a-router#using-v64-data-apis)
```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 }) => (
Do you really want to leave?
Cancel
Ok
)}
```
### Props
1. `when`: `boolean` | `BlockerFunction`
```ts
BlockerFunction = (args: {
currentLocation: Location
nextLocation: Location
historyAction: HistoryAction
}) => boolean
```
2. `beforeConfirm(nextLocation?: Location)` : `Promise` _(Optional)_
3. `beforeCancel()` : `Promise` _(Optional)_
### Return values
1. `isActive`: `Boolean`
2. `onConfirm(nextLocation?: Location)`: `void`
3. `onCancel()`: `void`
4. `nextLocation`: `Location | undefined`
#### Note 🗒️
This version works with react-router-dom >=v7 or react-router >=v7 and shall be ideally used with [**data routers**](https://reactrouter.com/6.28.1/routers/picking-a-router#using-v64-data-apis)
- 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](https://github.com/sshyam-gupta/react-router-prompt/issues).
## Acknowledgements
- Inspiration from [react-router-navigation-prompt](https://www.npmjs.com/package/react-router-navigation-prompt)
- Gist: [https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743](https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743)
## Support
Give a ⭐️ if this project helped you!
## 📝 License
Copyright © 2023 [Shyam Gupta ([email protected])](https://github.com/sshyam-gupta)
This project is [MIT](https://github.com/sshyam-gupta/react-router-prompt/blob/main/LICENSE) licensed.
## About me
- Website: [sshyam-gupta.space](https://sshyam-gupta.space/)
- Twitter: [@shyamm06](https://twitter.com/shyamm06)
- GitHub: [@sshyam-gupta](https://github.com/sshyam-gupta)
- LinkedIn: [@shyam-gupta-66463a62](https://linkedin.com/in/https://www.linkedin.com/in/shyam-gupta-66463a62/)