react-router-prompt

react-router-prompt 🚨

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

🏠 Homepage

✨ Demo

Install

pnpm add react-router-prompt

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

Note:

This version works with react-router-dom >=v6.7

🤝 Contributing

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

Show your support

Give a ⭐️ if this project helped you!

Credits

• Inspiration from react-router-navigation-prompt

• Gist: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743

📝 License

Copyright © 2022 Shyam Gupta ([e-mail]).
This project is MIT licensed.

Author

👤 Shyam Gupta ([e-mail])

• Website: https://sshyam-gupta.space/
• Twitter: @shyamm06
• Github: @sshyam-gupta
• LinkedIn: @https://www.linkedin.com/in/shyam-gupta-66463a62/