# react-router-navigation-prompt

> A replacement component for the react-router ``. Allows for more flexible dialogs.

Latest version **1.9.6** (published 2022-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-router-navigation-prompt
pnpm add react-router-navigation-prompt
yarn add react-router-navigation-prompt
bun add react-router-navigation-prompt
```

## Health

**Score 30/100 (F)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.9.6 |
| Published | 2022-02-13 |
| First published | 2017-10-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 224.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 192 |
| Author | @ZacharyRSmith |
| Maintainers | zacharyrsmith |
| Keywords | confirm, navigation, prompt, react, router, user |

## Links

- npm: https://www.npmjs.com/package/react-router-navigation-prompt
- Repository: https://github.com/ZacharyRSmith/react-router-navigation-prompt
- Homepage: https://github.com/ZacharyRSmith/react-router-navigation-prompt#readme
- Issues: https://github.com/ZacharyRSmith/react-router-navigation-prompt/issues
- npm.io page: https://npm.io/package/react-router-navigation-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

- 1.9.6 (latest) — 2022-02-13
- 1.9.1 — 2021-09-18
- 1.9.0 — 2021-09-18
- 1.8.15 — 2021-08-18
- 1.8.14 — 2021-06-21
- 1.8.13 — 2020-07-16
- 1.8.12 — 2020-06-19
- 1.8.11 — 2020-04-16
- 1.8.10 — 2019-10-04
- 1.8.9 — 2019-10-04
- 1.8.8 — 2019-09-28
- 1.8.7 — 2019-05-16
- 1.8.6 — 2019-04-24
- 1.8.5 — 2019-02-22
- 1.8.4 — 2019-01-18
- … 34 more at https://npm.io/package/react-router-navigation-prompt/versions

## README

# React Router <NavigationPrompt/>

<a href="https://github.com/DevExpress/testcafe">
    <img alt="Tested with TestCafe" src="https://img.shields.io/badge/tested%20with-TestCafe-2fa4cf.svg">
</a>

## Table of Contents

#### Overview

#### Demo

#### Example Usage

#### API

## Overview

Prompts user to confirm navigation. A replacement component for the react-router `<Prompt/>` (this still uses react-router to work). Allows for more flexible dialogs.

**Note: Currently tested using only react-router's `BrowserHistory`. `HashHistory` has issues: https://github.com/ZacharyRSmith/react-router-navigation-prompt/issues/36**

**Note: Navigation away from your site, reload, or closing tab/window will also prompt navigation confirmation when `<NavigationPrompt/>`'s `props.when` is truthy. However, for security concerns browsers usually handle this navigation UX themselves, leading to vanilla alert boxes. Also, many browsers require users to interact with your site before confirming navigation away.**

**Note: If you pass a function to `props.when`, then make sure to check if `nextLocation` and `action` are defined before trying to use them.**

**Note: Just like react-router's `<Prompt/>`, this component does not work with multiple `BrowserHistory`s: https://github.com/ZacharyRSmith/react-router-navigation-prompt/issues/77 **

Motivation: https://github.com/ReactTraining/react-router/issues/4635

Adapted from: https://gist.github.com/bummzack/a586533607ece482475e0c211790dd50

## Demo

Below is a gif of `<Prompt />` and a gif of `<NavigationPrompt />`, with links to sandboxes to try them yourself:

This gif shows react-router's `<Prompt />`, which relies on the browser's alert boxes. You can try it [here](https://codesandbox.io/s/sleepy-dubinsky-3yc4k?file=/src/index.js)

![demo 1 gif](https://media.giphy.com/media/2t9sbep1TtRTHF2YJD/giphy.gif)

This gif shows `<NavigationPrompt />`, which enables custom dialogs _except when the browser requires a vanilla alert box for security reasons_. You can try it [here](https://9q3wn56zrp.codesandbox.io)

![demo 2 gif](https://media.giphy.com/media/oVkikQIhaZIzcEBK70/giphy.gif)

## Example Usage

#### Simplest example:

```javascript
import NavigationPrompt from "react-router-navigation-prompt";

import ConfirmNavigationModal from "./your-own-code";

<NavigationPrompt when={this.state.shouldConfirmNavigation}>
  {({ onConfirm, onCancel }) => (
    <ConfirmNavigationModal
      when={true}
      onCancel={onCancel}
      onConfirm={onConfirm}
    />
  )}
</NavigationPrompt>;
```

#### Complex example:

```javascript
import NavigationPrompt from "react-router-navigation-prompt";

import Modal from "./your-own-code";

<NavigationPrompt
  beforeConfirm={(clb)=>this.cleanup(clb)} //call the callback function when finished cleaning up
  // Children will be rendered even if props.when is falsey and isActive is false:
  renderIfNotActive={true}
  // Confirm navigation if going to a path that does not start with current path:
  when={(crntLocation, nextLocation, _action) =>
    !nextLocation || !nextLocation.pathname.startsWith(crntLocation.pathname)
  }
>
  {({ isActive, onCancel, onConfirm }) => {
    if (isActive) {
      return (
        <Modal show={true}>
          <div>
            <p>Do you really want to leave?</p>
            <button onClick={onCancel}>Cancel</button>
            <button onClick={onConfirm}>Ok</button>
          </div>
        </Modal>
      );
    }
    return <div>This is probably an anti-pattern but ya know...</div>;
  }}
</NavigationPrompt>;
```

## API

- `props`
  - afterCancel?: Function,
  - afterConfirm?: Function,
  - allowGoBack: bool (use _goBack_ method instead of _push_ when navigating back -- !! NOTE WELL !! it will _always_ navigate back only 1 item, even when it should navigate back more items.  read more: https://github.com/ZacharyRSmith/react-router-navigation-prompt/pull/30),
  - beforeCancel?: Function,
  - beforeConfirm?: Function,
  - children: (data: {isActive: bool, onCancel: Function, onConfirm: Function}) => React$Element<\*>,
  - renderIfNotActive: bool,
  - when: bool | (Location, ?Location, ?HistoryAction) => bool,
  - disableNative: bool,
    // Added by react-router:
  - match: Match,
  - history: RouterHistory,
  - location: Location,

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