New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-router-prompt

Package Overview
Dependencies
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-router-prompt

React Router Navigation Prompt for v6

Version published
Maintainers
1
Created
Source

react-router-prompt 🚨

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

npm version

npm downloads

npm bundle size

✨ 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

Support

Give a ⭐️ if this project helped you!

📝 License

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

About me

Keywords

FAQs

Package last updated on 12 Feb 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts