Skip to content

Commit b5d70ed

Browse files
committed
chore: generate markdown docs from jsdocs
1 parent b0b9d98 commit b5d70ed

5 files changed

Lines changed: 78 additions & 8 deletions

File tree

docs/api/data-routers/createBrowserRouter.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -243,12 +243,29 @@ which is provided as the `context` argument to client [`action`](../../start/dat
243243
This function is called to generate a fresh `context` instance on each
244244
navigation or fetcher call.
245245

246+
```tsx
247+
import {
248+
unstable_createContext,
249+
unstable_RouterContextProvider,
250+
} from "react-router";
251+
252+
const apiClientContext = unstable_createContext<APIClient>();
253+
254+
function createBrowserRouter(routes, {
255+
unstable_getContext() {
256+
let context = new unstable_RouterContextProvider();
257+
context.set(apiClientContext, getApiClient());
258+
return context;
259+
}
260+
})
261+
```
262+
246263
### opts.hydrationData
247264

248265
When Server-Rendering and opting-out of automatic hydration, the
249266
`hydrationData` option allows you to pass in hydration data from your
250267
server-render. This will almost always be a subset of data from the
251-
[`StaticHandlerContext`](https://api.reactrouter.com/v7/interfaces/react_router.StaticHandlerContext.html) value you get back from [`StaticHandler`](https://api.reactrouter.com/v7/interfaces/react_router.StaticHandler.html)'s
268+
[`StaticHandlerContext`](https://api.reactrouter.com/v7/interfaces/react_router.StaticHandlerContext.html) value you get back from the [`StaticHandler`](https://api.reactrouter.com/v7/interfaces/react_router.StaticHandler.html)'s
252269
`query` method:
253270

254271
```tsx

docs/api/data-routers/createHashRouter.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,29 @@ which is provided as the `context` argument to client [`action`](../../start/dat
5656
This function is called to generate a fresh `context` instance on each
5757
navigation or fetcher call.
5858

59+
```tsx
60+
import {
61+
unstable_createContext,
62+
unstable_RouterContextProvider,
63+
} from "react-router";
64+
65+
const apiClientContext = unstable_createContext<APIClient>();
66+
67+
function createBrowserRouter(routes, {
68+
unstable_getContext() {
69+
let context = new unstable_RouterContextProvider();
70+
context.set(apiClientContext, getApiClient());
71+
return context;
72+
}
73+
})
74+
```
75+
5976
### opts.hydrationData
6077

6178
When Server-Rendering and opting-out of automatic hydration, the
6279
`hydrationData` option allows you to pass in hydration data from your
6380
server-render. This will almost always be a subset of data from the
64-
[`StaticHandlerContext`](https://api.reactrouter.com/v7/interfaces/react_router.StaticHandlerContext.html) value you get back from [`StaticHandler`](https://api.reactrouter.com/v7/interfaces/react_router.StaticHandler.html)'s
81+
[`StaticHandlerContext`](https://api.reactrouter.com/v7/interfaces/react_router.StaticHandlerContext.html) value you get back from the [`StaticHandler`](https://api.reactrouter.com/v7/interfaces/react_router.StaticHandler.html)'s
6582
`query` method:
6683

6784
```tsx

docs/api/hooks/useNavigate.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,40 @@ For example, if you have a tab interface connected to search params in the
135135
middle of a page, and you don't want it to scroll to the top when a tab is
136136
clicked.
137137
138+
### Return Type Augmentation
139+
140+
Internally, `useNavigate` uses a separate implementation when you are in
141+
Declarative mode versus Data/Framework mode - the primary difference being
142+
that the latter is able to return a stable reference that does not change
143+
identity across navigations. The implementation in Data/Framework mode also
144+
returns a `Promise` that resolves when the navigation is completed. This means
145+
the return type of `useNavigate` is `void | Promise<void>`. This is accurate,
146+
but can lead to some red squigglies based on the union in the return value:
147+
148+
- If you're using `typescript-eslint`, you may see errors from
149+
[`@typescript-eslint/no-floating-promises`](https://typescript-eslint.io/rules/no-floating-promises/)
150+
- In Framework/Data mode, `React.use(navigate())` will show a false-positive
151+
`Argument of type 'void | Promise<void>' is not assignable to parameter of
152+
type 'Usable<void>'` error
153+
154+
The easiest way to work around these issues is to augment the type based on the
155+
router you're using:
156+
157+
```ts
158+
// If using <BrowserRouter>
159+
declare module "react-router" {
160+
interface NavigateFunction {
161+
(to: To, options?: NavigateOptions): void;
162+
(delta: number): void;
163+
}
164+
}
165+
166+
// If using <RouterProvider> or Framework mode
167+
declare module "react-router" {
168+
interface NavigateFunction {
169+
(to: To, options?: NavigateOptions): Promise<void>;
170+
(delta: number): Promise<void>;
171+
}
172+
}
173+
```
174+

docs/api/utils/RouterContextProvider.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import {
4242
const userContext = unstable_createContext<User | null>(null);
4343
const contextProvider = new unstable_RouterContextProvider();
4444
contextProvider.set(userContext, getUser());
45+
// ^ Type-safe
4546
const user = contextProvider.get(userContext);
4647
// ^ User
4748
```

docs/api/utils/createContext.md

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,10 @@ to release notes for relevant changes.</docs-warning>
3131
[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.unstable_createContext.html)
3232

3333
Creates a type-safe [`unstable_RouterContext`](https://api.reactrouter.com/v7/interfaces/react_router.unstable_RouterContext.html) object that can be used to
34-
* store and retrieve arbitrary values in [`action`](../../start/framework/route-module#action)s,
35-
* [`loader`](../../start/framework/route-module#loader)s, and [middleware](../../how-to/middleware).
36-
* Similar to React's [`createContext`](https://react.dev/reference/react/createContext),
37-
* but specifically designed for React Router's request/response lifecycle.
38-
39-
<docs-warning>Enable this API with the `future.unstable_middleware` flag.</docs-warning>
34+
store and retrieve arbitrary values in [`action`](../../start/framework/route-module#action)s,
35+
[`loader`](../../start/framework/route-module#loader)s, and [middleware](../../how-to/middleware).
36+
Similar to React's [`createContext`](https://react.dev/reference/react/createContext),
37+
but specifically designed for React Router's request/response lifecycle.
4038

4139
If a `defaultValue` is provided, it will be returned from `context.get()`
4240
when no value has been set for the context. Otherwise, reading this context

0 commit comments

Comments
 (0)