Skip to content

Commit 7df789c

Browse files
eps1loneps1lon
authored
[react] Add types for <ViewTransition> (#71580)
1 parent 3a252fd commit 7df789c

File tree

4 files changed

+100
-0
lines changed

4 files changed

+100
-0
lines changed

‎types/react/experimental.d.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,4 +122,29 @@ declare module "." {
122122
value: TaintableUniqueValue,
123123
): void;
124124
function experimental_taintObjectReference(message: string | undefined, object: Reference): void;
125+
126+
export interface ViewTransitionProps {
127+
/**
128+
* Assigns the {@link https://developer.chrome.com/blog/view-transitions-update-io24#view-transition-class `view-transition-class`} class to the underlying DOM node.
129+
*/
130+
className?: string | undefined;
131+
/**
132+
* "auto" will automatically assign a view-transition-name to the inner DOM node.
133+
* That way you can add a View Transition to a Component without controlling its DOM nodes styling otherwise.
134+
*
135+
* A difference between this and the browser's built-in view-transition-name: auto is that switching the DOM nodes within the <ViewTransition> component preserves the same name so this example cross-fades between the DOM nodes instead of causing an exit and enter.
136+
* @default "auto"
137+
*/
138+
name?: "auto" | (string & {}) | undefined;
139+
children?: ReactNode | undefined;
140+
}
141+
142+
/**
143+
* Opt-in for using {@link https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API View Transitions} in React.
144+
* View Transitions only trigger for async updates like {@link startTransition}, {@link useDeferredValue}, Actions or <{@link Suspense}> revealing from fallback to content.
145+
* Synchronous updates provide an opt-out but also guarantee that they commit immediately which View Transitions can't.
146+
*
147+
* @see {@link https://github.com/facebook/react/pull/31975}
148+
*/
149+
export const unstable_ViewTransition: ExoticComponent<ViewTransitionProps>;
125150
}

‎types/react/test/experimental.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,3 +138,28 @@ function taintTests() {
138138
true,
139139
);
140140
}
141+
142+
function viewTransitionTests() {
143+
const ViewTransition = React.unstable_ViewTransition;
144+
145+
<ViewTransition />;
146+
<ViewTransition className="enter-slide-in exit-fade-out update-cross-fade" />;
147+
<ViewTransition name="auto" />;
148+
<ViewTransition name="foo" />;
149+
// autocomplete should display "auto"
150+
<ViewTransition name="" />;
151+
152+
<ViewTransition>
153+
<div />
154+
</ViewTransition>;
155+
156+
const Null = () => null;
157+
<ViewTransition>
158+
<Null />
159+
</ViewTransition>;
160+
161+
const Div = ({ children }: { children?: React.ReactNode }) => <div>{children}</div>;
162+
<ViewTransition>
163+
<Div />
164+
</ViewTransition>;
165+
}

‎types/react/ts5.0/experimental.d.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,4 +122,29 @@ declare module "." {
122122
value: TaintableUniqueValue,
123123
): void;
124124
function experimental_taintObjectReference(message: string | undefined, object: Reference): void;
125+
126+
export interface ViewTransitionProps {
127+
/**
128+
* Assigns the {@link https://developer.chrome.com/blog/view-transitions-update-io24#view-transition-class `view-transition-class`} class to the underlying DOM node.
129+
*/
130+
className?: string | undefined;
131+
/**
132+
* "auto" will automatically assign a view-transition-name to the inner DOM node.
133+
* That way you can add a View Transition to a Component without controlling its DOM nodes styling otherwise.
134+
*
135+
* A difference between this and the browser's built-in view-transition-name: auto is that switching the DOM nodes within the <ViewTransition> component preserves the same name so this example cross-fades between the DOM nodes instead of causing an exit and enter.
136+
* @default "auto"
137+
*/
138+
name?: "auto" | (string & {}) | undefined;
139+
children?: ReactNode | undefined;
140+
}
141+
142+
/**
143+
* Opt-in for using {@link https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API View Transitions} in React.
144+
* View Transitions only trigger for async updates like {@link startTransition}, {@link useDeferredValue}, Actions or <{@link Suspense}> revealing from fallback to content.
145+
* Synchronous updates provide an opt-out but also guarantee that they commit immediately which View Transitions can't.
146+
*
147+
* @see {@link https://github.com/facebook/react/pull/31975}
148+
*/
149+
export const unstable_ViewTransition: ExoticComponent<ViewTransitionProps>;
125150
}

‎types/react/ts5.0/test/experimental.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,3 +141,28 @@ function taintTests() {
141141
true,
142142
);
143143
}
144+
145+
function viewTransitionTests() {
146+
const ViewTransition = React.unstable_ViewTransition;
147+
148+
<ViewTransition />;
149+
<ViewTransition className="enter-slide-in exit-fade-out update-cross-fade" />;
150+
<ViewTransition name="auto" />;
151+
<ViewTransition name="foo" />;
152+
// autocomplete should display "auto"
153+
<ViewTransition name="" />;
154+
155+
<ViewTransition>
156+
<div />
157+
</ViewTransition>;
158+
159+
const Null = () => null;
160+
<ViewTransition>
161+
<Null />
162+
</ViewTransition>;
163+
164+
const Div = ({ children }: { children?: React.ReactNode }) => <div>{children}</div>;
165+
<ViewTransition>
166+
<Div />
167+
</ViewTransition>;
168+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy