react-router-prompt

react-router-prompt 🚨

A component for the react-router 6 Prompt. Allows to create more flexible dialogs.

✨ Demo

🏠 Homepage

Installation

Prerequisite

React-router-dom >= 6.7 and can be used only with data routers

pnpm add react-router-prompt

or with other package manager like npm

npm install react-router-prompt

Usage

<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>

Props

when - boolean or BlockerFunction

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

Return values

1. isActive: Boolean
2. onConfirm(): void
3. onCancel(): void

Note 🗒️

This version works with react-router-dom >=v6.7 Should be used within data routers

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

Skipped support in middle due to breaking changes on react-router apis

yarn add react-router-prompt@0.3.0

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 ([e-mail]) This project is MIT licensed.

About me

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