Skip to content

Commit 1ad822c

Browse files
authored
Update docs for startViewTransition (#10927)
1 parent e93e908 commit 1ad822c

File tree

5 files changed

+16
-12
lines changed

5 files changed

+16
-12
lines changed

docs/components/form.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -273,9 +273,7 @@ See also: [`<Link preventScrollReset>`][link-preventscrollreset]
273273

274274
The `unstable_viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state].
275275

276-
<docs-warn>
277-
Please note that this API is marked unstable and may be subject to breaking changes without a major release.
278-
</docs-warn>
276+
<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
279277

280278
# Examples
281279

docs/components/link.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ The `unstable_viewTransition` prop enables a [View Transition][view-transitions]
157157
</Link>
158158
```
159159

160-
If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state]:
160+
If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state] hook (or check out the `transitioning` class and `isTransitioning` render prop in [NavLink][navlink]):
161161

162162
```jsx
163163
function ImageLink(to) {
@@ -188,9 +188,9 @@ function ImageLink(to) {
188188
}
189189
```
190190

191-
<docs-warn>
192-
Please note that this API is marked unstable and may be subject to breaking changes without a major release.
193-
</docs-warn>
191+
<docs-warning>`unstable_viewTransition` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
192+
193+
<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
194194

195195
[link-native]: ./link-native
196196
[scrollrestoration]: ./scroll-restoration
@@ -199,3 +199,5 @@ Please note that this API is marked unstable and may be subject to breaking chan
199199
[history-state]: https://developer.mozilla.org/en-US/docs/Web/API/History/state
200200
[use-view-transition-state]: ../hooks//use-view-transition-state
201201
[view-transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
202+
[picking-a-router]: ../routers/picking-a-router
203+
[navlink]: ./nav-link

docs/components/nav-link.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,9 +171,9 @@ You may also use the `className`/`style` props or the render props passed to `ch
171171
</NavLink>
172172
```
173173

174-
<docs-warn>
174+
<docs-warning>
175175
Please note that this API is marked unstable and may be subject to breaking changes without a major release.
176-
</docs-warn>
176+
</docs-warning>
177177

178178
[aria-current]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
179179
[view-transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

docs/hooks/use-navigate.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,9 @@ function EditContact() {
8989

9090
The `unstable_viewTransition` option enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state].
9191

92-
<docs-warn>
93-
Please note that this API is marked unstable and may be subject to breaking changes without a major release.
94-
</docs-warn>
92+
<docs-warning>`unstable_viewTransition` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
93+
94+
<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
9595

9696
[link]: ../components/link
9797
[redirect]: ../fetch/redirect
@@ -101,3 +101,4 @@ Please note that this API is marked unstable and may be subject to breaking chan
101101
[scrollrestoration]: ../components/scroll-restoration
102102
[use-view-transition-state]: ../hooks//use-view-transition-state
103103
[view-transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
104+
[picking-a-router]: ../routers/picking-a-router

docs/routers/picking-a-router.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ The following APIs are introduced in React Router 6.4 and will only work when us
109109
- [`useRouteError`][userouteerror]
110110
- [`useRouteLoaderData`][userouteloaderdata]
111111
- [`useSubmit`][usesubmit]
112+
- `startViewTransition` support on [Link][viewtransition-link] and [useNavigate][viewtransition-navigate]
112113

113114
[createbrowserrouter]: ./create-browser-router
114115
[createhashrouter]: ./create-hash-router
@@ -142,3 +143,5 @@ The following APIs are introduced in React Router 6.4 and will only work when us
142143
[userouteerror]: ../hooks/use-route-error
143144
[userouteloaderdata]: ../hooks/use-route-loader-data
144145
[usesubmit]: ../hooks/use-submit
146+
[viewtransition-link]: ../components/link#unstable_viewtransition
147+
[viewtransition-navigate]: ../hooks/use-navigate#optionsunstable_viewtransition

0 commit comments

Comments
 (0)