react-router-prompt
TypeScript icon, indicating that this package has built-in type declarations

0.7.1 • Public • Published

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.19 and can be used only 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

  1. when: boolean | BlockerFunction

    BlockerFunction = (args: {
      currentLocation: Location
      nextLocation: Location
      historyAction: HistoryAction
    }) => boolean
  2. beforeConfirm() : Promise<unknown> (Optional)

  3. beforeCancel() : Promise<unknown> (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

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.

Acknowledgements

Support

Give a ⭐️ if this project helped you!

📝 License

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

About me

Package Sidebar

Install

npm i react-router-prompt

Weekly Downloads

18,812

Version

0.7.1

License

MIT

Unpacked Size

47.7 kB

Total Files

10

Last publish

Collaborators

  • shyamm06