@qubhq/react-router-prompt NPM

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 for more details on react-router support

✨ Demo

🏠 Homepage

Installation

Prerequisite

React-router-dom >= 7 and shall be ideally used with data routers

pnpm add react-router-prompt

or with other package manager like yarn

yarn add react-router-prompt

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

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

beforeConfirm(nextLocation?: Location) : Promise<unknown> (Optional)
beforeCancel() : Promise<unknown> (Optional)

Return values

isActive: Boolean
onConfirm(nextLocation?: Location): void
onCancel(): void
nextLocation: Location | undefined

Note 🗒️

This version works with react-router-dom >=v7 or react-router >=v7 and shall be ideally used with data routers

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.

Acknowledgements

Inspiration from react-router-navigation-prompt
Gist: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743

Support

Give a ⭐️ if this project helped you!

📝 License

About me

confirm navigation prompt react router

6 months ago

7 months ago

8 months ago

11 months ago