diff --git a/docs/api/hooks/useBlocker.md b/docs/api/hooks/useBlocker.md index 21297ac991..bd6caf37e0 100644 --- a/docs/api/hooks/useBlocker.md +++ b/docs/api/hooks/useBlocker.md @@ -15,7 +15,7 @@ Allow the application to block navigations within the SPA and present the user a ## Signature ```tsx -useBlocker(shouldBlock): Blocker +useBlocker(shouldBlock: boolean | BlockerFunction): Blocker ``` ## Params @@ -24,7 +24,43 @@ useBlocker(shouldBlock): Blocker [modes: framework, data] -_No documentation_ +**boolean** + +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. + +[**BlockerFunction**](https://api.reactrouter.com/v7/types/react_router.BlockerFunction.html) + +A function that returns a boolean indicating whether the navigation should be blocked. + +```tsx +const blocker = useBlocker( + ({ currentLocation, nextLocation, historyAction }) => + value !== "" && + currentLocation.pathname !== nextLocation.pathname +); +``` + +## Blocker + +The [Blocker](https://api.reactrouter.com/v7/types/react_router.Blocker.html) object returned by the hook. It has the following properties: + +### `state` + +- `unblocked` - the blocker is idle and has not prevented any navigation +- `blocked` - the blocker has prevented a navigation +- `proceeding` - the blocker is proceeding through from a blocked navigation + +### `location` + +When in a `blocked` state, this represents the location to which we blocked a navigation. When in a `proceeding` state, this is the location being navigated to after a `blocker.proceed()` call. + +### `proceed()` + +When in a `blocked` state, you may call `blocker.proceed()` to proceed to the blocked location. + +### `reset()` + +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. ## Examples