Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 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 (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-23T22:55:21.000Z (14 days ago)
- Last Synced: 2025-01-27T13:04:31.023Z (11 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: 836 KB
- Stars: 74
- Watchers: 2
- Forks: 18
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-router-prompt 🚨
> A component for the react-router 6 `Prompt`. Allows to create more flexible dialogs.
[](https://www.npmjs.com/package/react-router-prompt)
[](https://www.npmjs.com/package/react-router-prompt)
[](https://www.npmjs.com/package/react-router-prompt)
## ✨ [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 >= 6.19** and can be used only with [**data routers**](https://reactrouter.com/en/6.8.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()` : `Promise` _(Optional)_
3. `beforeCancel()` : `Promise` _(Optional)_
### Return values
1. `isActive`: `Boolean`
2. `onConfirm()`: `void`
3. `onCancel()`: `void`
#### Note 🗒️
This version works with react-router-dom >=v6.19
Should be used within [data routers](https://reactrouter.com/en/6.8.1/routers/picking-a-router#using-v64-data-apis)
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_
## 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/)