Skip to content

Commit 4f9a965

Browse files
committed
chore: generate markdown docs from jsdocs
1 parent 52dbe53 commit 4f9a965

File tree

1 file changed

+43
-39
lines changed

1 file changed

+43
-39
lines changed

docs/api/hooks/useBlocker.md

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,68 +4,71 @@ title: useBlocker
44

55
# useBlocker
66

7+
<!--
8+
⚠️ ⚠️ IMPORTANT ⚠️ ⚠️
9+
10+
Hey! Thank you for helping improve our documentation!
11+
12+
This file is auto-generated from the JSDoc comments in the source
13+
code, so please find the definition of this API and edit the JSDoc
14+
comments accordingly and this file will be re-generated once those
15+
changes are merged.
16+
-->
17+
718
[MODES: framework, data]
819

920
## Summary
1021

1122
[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useBlocker.html)
1223

13-
Allow the application to block navigations within the SPA and present the user a confirmation dialog to confirm the navigation. Mostly used to avoid using half-filled form data. This does not handle hard-reloads or cross-origin navigations.
14-
15-
## Signature
24+
Allow the application to block navigations within the SPA and present the
25+
user a confirmation dialog to confirm the navigation. Mostly used to avoid
26+
using half-filled form data. This does not handle hard-reloads or
27+
cross-origin navigations.
28+
29+
The Blocker object returned by the hook has the following properties:
30+
31+
- **`state`**
32+
- `unblocked` - the blocker is idle and has not prevented any navigation
33+
- `blocked` - the blocker has prevented a navigation
34+
- `proceeding` - the blocker is proceeding through from a blocked navigation
35+
- **`location`**
36+
- When in a `blocked` state, this represents the [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html) to which we
37+
blocked a navigation. When in a `proceeding` state, this is the location
38+
being navigated to after a `blocker.proceed()` call.
39+
- **`proceed()`**
40+
- When in a `blocked` state, you may call `blocker.proceed()` to proceed to the
41+
blocked location.
42+
- **`reset()`**
43+
- When in a `blocked` state, you may call `blocker.reset()` to return the blocker
44+
back to an `unblocked` state and leave the user at the current location.
1645

1746
```tsx
18-
useBlocker(shouldBlock: boolean | BlockerFunction): Blocker
19-
```
20-
21-
## Params
22-
23-
### shouldBlock
24-
25-
[modes: framework, data]
26-
27-
**boolean**
28-
29-
Whether or not the navigation should be blocked. If `true`, the blocker will prevent the navigation. If `false`, the blocker will not prevent the navigation.
30-
31-
[**BlockerFunction**](https://api.reactrouter.com/v7/types/react_router.BlockerFunction.html)
47+
// Boolean version
48+
const blocker = useBlocker(value !== "");
3249

33-
A function that returns a boolean indicating whether the navigation should be blocked.
34-
35-
```tsx
50+
// Function version
3651
const blocker = useBlocker(
3752
({ currentLocation, nextLocation, historyAction }) =>
3853
value !== "" &&
3954
currentLocation.pathname !== nextLocation.pathname
4055
);
4156
```
4257

43-
## Blocker
44-
45-
The [Blocker](https://api.reactrouter.com/v7/types/react_router.Blocker.html) object returned by the hook. It has the following properties:
46-
47-
### `state`
48-
49-
- `unblocked` - the blocker is idle and has not prevented any navigation
50-
- `blocked` - the blocker has prevented a navigation
51-
- `proceeding` - the blocker is proceeding through from a blocked navigation
52-
53-
### `location`
54-
55-
When in a `blocked` state, this represents the [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html) to which we blocked a navigation. When in a `proceeding` state, this is the location being navigated to after a `blocker.proceed()` call.
58+
## Signature
5659

57-
### `proceed()`
60+
```tsx
61+
useBlocker(shouldBlock: boolean | BlockerFunction): Blocker
62+
```
5863

59-
When in a `blocked` state, you may call `blocker.proceed()` to proceed to the blocked location.
64+
## Params
6065

61-
### `reset()`
66+
### shouldBlock
6267

63-
When in a `blocked` state, you may call `blocker.reset()` to return the blocker back to an `unblocked` state and leave the user at the current location.
68+
Either a boolean or a function returning a boolean which indicates whether the navigation should be blocked. The function format receives a single object parameter containing the `currentLocation`, `nextLocation`, and `historyAction` of the potential navigation.
6469

6570
## Examples
6671

67-
### Basic
68-
6972
```tsx
7073
import { useCallback, useState } from "react";
7174
import { BlockerFunction, useBlocker } from "react-router";
@@ -128,3 +131,4 @@ export function ImportantForm() {
128131
);
129132
}
130133
```
134+

0 commit comments

Comments
 (0)