# react-router-nav-prompt

> Customisable prompt for React Router

Latest version **0.4.1** (published 2021-05-20) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2021-05-20 |
| First published | 2020-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dane David |
| Maintainers | danedavid |
| Keywords | react, react-hooks, react-router |

## Links

- npm: https://www.npmjs.com/package/react-router-nav-prompt
- Repository: https://github.com/danedavid/react-router-nav-prompt
- Homepage: https://github.com/danedavid/react-router-nav-prompt#readme
- Issues: https://github.com/danedavid/react-router-nav-prompt/issues
- npm.io page: https://npm.io/package/react-router-nav-prompt

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.1 (latest) — 2021-05-20
- 0.4.0 — 2020-07-27
- 0.3.0 — 2020-07-27
- 0.2.2 — 2020-07-27
- 0.2.1 — 2020-07-27
- 0.2.0 — 2020-07-11

## README

# react-router-nav-prompt

> Simple component & hook primitives to provide customisable prompt messages when user tries to leave the page in React Router

## Usage

Installation: `npm i --save react-router-nav-prompt`

`useNavPrompt`:
```JSX
import { useNavPrompt } from 'react-router-nav-prompt';
import Modal from 'your-component-library';

const FormComponent () => {
  const [email, setEmail] = useState('');

  const {
    blocked,
    hidePrompt,
    navigate,
  } = useNavPrompt({
    shouldBlock: Boolean(email),
  });

  if (blocked) {
    return (
      <Modal>
        <div>
          Are you sure you want to leave this page?
        </div>
        <button onClick={hidePrompt}>Stay & fill the form</button>
        <button onClick={navigate}>Continue without saving</button>
      </Modal>
    );
  }

  return (
    <div>
      <input
        type="text"
        onChange={(ev) => setEmail(ev.target.value)}
        value={email}
      />
    </div>
  );
};
```


`<NavPrompt />`:
```JSX
import { NavPrompt } from 'react-router-nav-prompt';
import Modal from 'your-component-library';

const FormComponent () => {
  const [email, setEmail] = useState('');

  const {
    blocked,
    hidePrompt,
    navigate,
  } = useNavPrompt({
    shouldBlock: Boolean(email),
  });

  return (
    <NavPrompt>
      {({
        blocked,
        hidePrompt,
        navigate,
      }) => (
        blocked
        ? (
          <Modal>
            <div>Are you sure you want to leave this page?</div>
            <button onClick={hidePrompt}>Stay & fill the form</button>
            <button onClick={navigate}>Continue without saving</button>
          </Modal>
        ) : (
          <div>
            <input
              type="text"
              onChange={(ev) => setEmail(ev.target.value)}
              value={email}
            />
          </div>
        )
      )}
    </NavPrompt>
  );
};
```

## API

*`useNavPrompt`*: React hook to control the visibility of prompt UI.
*`<NavPrompt/>`*: Component with render prop.

  *Parameters/Props (is an `{}` of)*:
  - `shouldBlock (boolean)`: Whether route change should be blocked.

  *Return value/child parameters (is an `{}` of)*:
  - `blocked (boolean)`: Route change is currently blocked. Show the prompt UI.
  - `hidePrompt (function)`: Set `blocked` to false & cancel the route navigation.
  - `navigate (function)`: Unblock & continue to the route to which navigation occurred.

## Implementation Notes

- `history.block` API might change in v5. See [history#690](https://github.com/ReactTraining/history/issues/690)


## Contributing

Find any issues? API/features need improvement? [Create an issue](https://github.com/danedavid/react-router-nav-prompt/issues) or hit me up @ [@this_dane](https://twitter.com/this_dane)!

---

Made with ❤ by [danedavid](https://github.com/danedavid)

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