Skip to content

Commit 0d1c20d

Browse files
docs(api/hooks/useBlocker): finish doc (#13803)
* Finish blocker doc * Update docs/api/hooks/useBlocker.md Co-authored-by: Michaël De Boey <[email protected]> --------- Co-authored-by: Michaël De Boey <[email protected]>
1 parent 37c7022 commit 0d1c20d

File tree

1 file changed

+38
-2
lines changed

1 file changed

+38
-2
lines changed

docs/api/hooks/useBlocker.md

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Allow the application to block navigations within the SPA and present the user a
1515
## Signature
1616

1717
```tsx
18-
useBlocker(shouldBlock): Blocker
18+
useBlocker(shouldBlock: boolean | BlockerFunction): Blocker
1919
```
2020

2121
## Params
@@ -24,7 +24,43 @@ useBlocker(shouldBlock): Blocker
2424

2525
[modes: framework, data]
2626

27-
_No documentation_
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)
32+
33+
A function that returns a boolean indicating whether the navigation should be blocked.
34+
35+
```tsx
36+
const blocker = useBlocker(
37+
({ currentLocation, nextLocation, historyAction }) =>
38+
value !== "" &&
39+
currentLocation.pathname !== nextLocation.pathname
40+
);
41+
```
42+
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.
56+
57+
### `proceed()`
58+
59+
When in a `blocked` state, you may call `blocker.proceed()` to proceed to the blocked location.
60+
61+
### `reset()`
62+
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.
2864

2965
## Examples
3066

0 commit comments

Comments
 (0)