# @nightvisi0n/react-router-prompt

> React Router Navigation Prompt for v6

Latest version **0.5.5-rc.0** (published 2023-11-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nightvisi0n/react-router-prompt
pnpm add @nightvisi0n/react-router-prompt
yarn add @nightvisi0n/react-router-prompt
bun add @nightvisi0n/react-router-prompt
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.5.5-rc.0 |
| Published | 2023-11-20 |
| First published | 2023-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 46.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 81 |
| Author | Shyam Gupta |
| Maintainers | nightvisi0n |
| Keywords | confirm, navigation, prompt, react, router |

## Links

- npm: https://www.npmjs.com/package/@nightvisi0n/react-router-prompt
- Repository: https://github.com/sshyam-gupta/react-router-prompt
- Homepage: https://github.com/sshyam-gupta/react-router-prompt#readme
- Issues: https://github.com/sshyam-gupta/react-router-prompt/issues
- npm.io page: https://npm.io/package/@nightvisi0n/react-router-prompt

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.5.5-rc.0 (latest) — 2023-11-20

## README

<h1 align="center">react-router-prompt 🚨</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/react-router-prompt">
    <img alt="npm version" src="https://img.shields.io/npm/v/react-router-prompt.svg">
  </a>
  &nbsp;
  <a href="https://www.npmjs.com/package/react-router-prompt">
    <img alt="npm weekly downloads" src="https://img.shields.io/npm/dw/react-router-prompt.svg">
  </a>
  &nbsp;
  <a href="https://www.npmjs.com/package/react-router-prompt">
    <img alt="total downloads" src="https://img.shields.io/npm/dt/react-router-prompt.svg">
  </a>
  &nbsp;
  <a href="https://www.npmjs.com/package/react-router-prompt">
    <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/react-router-prompt">
  </a>
</p>


<p align="center">
  A Component for the react-router v7 <b>Prompt</b> (package renamed from react-router-dom). Allows to create more flexible dialogs.
</p>

<hr />

Please follow [Note section](https://github.com/sshyam-gupta/react-router-prompt#note) for more details on react-router support

## ✨ [Demo](https://codesandbox.io/s/react-router-prompt-example-react-router-6-7-y9ug7z?file=/src/App.js)

## 🏠 [Homepage](https://github.com/sshyam-gupta/react-router-prompt#readme)

## Installation

### Prerequisite

**React-router >= 7** and shall be ideally used with [**data routers**](https://reactrouter.com/6.28.1/routers/picking-a-router#using-v64-data-apis)

```bash
pnpm add react-router-prompt
```

or with other package manager like yarn

```bash
yarn add react-router-prompt
```

## Basic Usage

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

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

2. `beforeConfirm(nextLocation?: Location)` : `Promise<unknown>` _(Optional)_

3. `beforeCancel()` : `Promise<unknown>` _(Optional)_

### Return values

1. `isActive`: `Boolean`
2. `onConfirm(nextLocation?: Location)`: `void`
3. `onCancel()`: `void`
4. `nextLocation`: `Location | undefined`

#### Note 🗒️

This version works with react-router >=v7 and shall be ideally used with [**data routers**](https://reactrouter.com/6.28.1/routers/picking-a-router#using-v64-data-apis)

- 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](https://github.com/sshyam-gupta/react-router-prompt/issues).

## Acknowledgements

- Inspiration from [react-router-navigation-prompt](https://www.npmjs.com/package/react-router-navigation-prompt)
- Gist: [https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743](https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743)

## Support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2023 [Shyam Gupta (shyamm@outlook.com)](https://github.com/sshyam-gupta)
This project is [MIT](https://github.com/sshyam-gupta/react-router-prompt/blob/main/LICENSE) licensed.

## About me

- Website: [sshyam-gupta.space](https://sshyam-gupta.space/)
- Twitter: [@shyamm06](https://twitter.com/shyamm06)
- GitHub: [@sshyam-gupta](https://github.com/sshyam-gupta)
- LinkedIn: [@shyam-gupta-66463a62](https://linkedin.com/in/https://www.linkedin.com/in/shyam-gupta-66463a62/)

---
_Source: https://npm.io/package/@nightvisi0n/react-router-prompt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._