You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Form component is a wrapper around a plain HTML [form][htmlform] that emulates the browser for client side routing and data mutations. It is _not_ a form validation/state management library like you might be used to in the React ecosystem (for that, we recommend the browser's built in [HTML Form Validation][formvalidation] and data validation on your backend server).
9
35
10
36
<docs-warning>This feature only works if using a data router, see [Picking a Router][pickingarouter]</docs-warning>
@@ -243,6 +269,12 @@ If you are using [`<ScrollRestoration>`][scrollrestoration], this lets you preve
243
269
244
270
See also: [`<Link preventScrollReset>`][link-preventscrollreset]
245
271
272
+
## `unstable_viewTransition`
273
+
274
+
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].
275
+
276
+
<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
277
+
246
278
# Examples
247
279
248
280
TODO: More examples
@@ -349,3 +381,5 @@ You can access those values from the `request.url`
Copy file name to clipboardExpand all lines: docs/components/link.md
+53-3Lines changed: 53 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,12 +17,13 @@ interface LinkProps
17
17
React.AnchorHTMLAttributes<HTMLAnchorElement>,
18
18
"href"
19
19
> {
20
-
replace?:boolean;
21
-
state?:any;
22
20
to:To;
23
-
reloadDocument?:boolean;
24
21
preventScrollReset?:boolean;
25
22
relative?:"route"|"path";
23
+
reloadDocument?:boolean;
24
+
replace?:boolean;
25
+
state?:any;
26
+
unstable_viewTransition?:boolean;
26
27
}
27
28
28
29
typeTo=string|Partial<Path>;
@@ -146,8 +147,57 @@ let { state } = useLocation();
146
147
147
148
The `reloadDocument` property can be used to skip client side routing and let the browser handle the transition normally (as if it were an `<a href>`).
148
149
150
+
## `unstable_viewTransition`
151
+
152
+
The `unstable_viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`:
153
+
154
+
```jsx
155
+
<Link to={to} unstable_viewTransition>
156
+
Click me
157
+
</Link>
158
+
```
159
+
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]):
161
+
162
+
```jsx
163
+
functionImageLink(to) {
164
+
constisTransitioning=
165
+
unstable_useViewTransitionState(to);
166
+
return (
167
+
<Link to={to} unstable_viewTransition>
168
+
<p
169
+
style={{
170
+
viewTransitionName: isTransitioning
171
+
?"image-title"
172
+
:"",
173
+
}}
174
+
>
175
+
Image Number {idx}
176
+
</p>
177
+
<img
178
+
src={src}
179
+
alt={`Img ${idx}`}
180
+
style={{
181
+
viewTransitionName: isTransitioning
182
+
?"image-expand"
183
+
:"",
184
+
}}
185
+
/>
186
+
</Link>
187
+
);
188
+
}
189
+
```
190
+
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>
Copy file name to clipboardExpand all lines: docs/components/nav-link.md
+69-5Lines changed: 69 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,11 @@ title: NavLink
4
4
5
5
# `<NavLink>`
6
6
7
-
A `<NavLink>` is a special kind of `<Link>` that knows whether or not it is "active" or "pending". This is useful when building a navigation menu, such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. It also provides useful context for assistive technology like screen readers.
7
+
A `<NavLink>` is a special kind of `<Link>` that knows whether or not it is "active", "pending", or "transitioning". This is useful in a few different scenarios:
8
+
9
+
- When building a navigation menu, such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected
10
+
- It provides useful context for assistive technology like screen readers
11
+
- It provides a "transitioning" value to give you finer-grained control over [View Transitions][view-transitions]
8
12
9
13
```tsx
10
14
import { NavLink } from"react-router-dom";
@@ -42,8 +46,12 @@ The `className` prop works like a normal className, but you can also pass it a f
@@ -112,4 +121,59 @@ When a `NavLink` is active it will automatically apply `<a aria-current="page">`
112
121
113
122
The `reloadDocument` property can be used to skip client side routing and let the browser handle the transition normally (as if it were an `<a href>`).
114
123
124
+
## `unstable_viewTransition`
125
+
126
+
The `unstable_viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. By default, during the transition a `transitioning` class will be added to the `<a>` element that you can use to customize the view transition.
127
+
128
+
```css
129
+
a.transitioningp {
130
+
view-transition-name: "image-title";
131
+
}
132
+
133
+
a.transitioningimg {
134
+
view-transition-name: "image-expand";
135
+
}
136
+
```
137
+
138
+
```jsx
139
+
<NavLink to={to} unstable_viewTransition>
140
+
<p>Image Number {idx}</p>
141
+
<img src={src} alt={`Img ${idx}`} />
142
+
</NavLink>
143
+
```
144
+
145
+
You may also use the `className`/`style` props or the render props passed to `children` to further customize based on the `isTransitioning` value.
146
+
147
+
```jsx
148
+
<NavLink to={to} unstable_viewTransition>
149
+
{({ isTransitioning }) => (
150
+
<>
151
+
<p
152
+
style={{
153
+
viewTransitionName: isTransitioning
154
+
?"image-title"
155
+
:"",
156
+
}}
157
+
>
158
+
Image Number {idx}
159
+
</p>
160
+
<img
161
+
src={src}
162
+
alt={`Img ${idx}`}
163
+
style={{
164
+
viewTransitionName: isTransitioning
165
+
?"image-expand"
166
+
:"",
167
+
}}
168
+
/>
169
+
</>
170
+
)}
171
+
</NavLink>
172
+
```
173
+
174
+
<docs-warning>
175
+
Please note that this API is marked unstable and may be subject to breaking changes without a major release.
Copy file name to clipboardExpand all lines: docs/hooks/use-navigate.md
+11Lines changed: 11 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -85,9 +85,20 @@ function EditContact() {
85
85
}
86
86
```
87
87
88
+
## `options.unstable_viewTransition`
89
+
90
+
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].
91
+
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>
Copy file name to clipboardExpand all lines: docs/hooks/use-submit.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -150,7 +150,7 @@ submit(null, {
150
150
<Formaction="/logout"method="post" />;
151
151
```
152
152
153
-
Because submissions are navigations, the options may also contain the other navigation related props from [`<Form>`][form] such as `replace`, `state`, `preventScrollReset`, `relative`, etc.
153
+
Because submissions are navigations, the options may also contain the other navigation related props from [`<Form>`][form] such as `replace`, `state`, `preventScrollReset`, `relative`, `unstable_viewTransition`etc.
This hook returns `true` when there is an active [View Transition][view-transitions] to the specified location. This can be used to apply finer-grained styles to elements to further customize the view transition. This requires that view transitions have been enabled for the given navigation via the [unstable_viewTransition][link-view-transition] prop on the `Link` (or the `Form`, `navigate`, or `submit` call).
28
+
29
+
Consider clicking on an image in a list that you need to expand into the hero image on the destination page:
0 commit comments