react directives

29 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

ViewTransition component signature

The ViewTransition component accepts the following props: name (string, optional) to create a named transition for shared element animations, default (string, optional) to set the default animation class name, and share (object, optional) to map transition types to animation class names. It wraps children elements and activates view transitions when elements with matching names are added or removed between renders.

ViewTransition default prop values

The default prop on ViewTransition accepts values like "none" to disable animations for the children, or custom animation class names like "slow-fade". When set to "none", the content can define its own ViewTransition with custom animations.

ViewTransition name prop for shared element transitions

The name prop on ViewTransition creates a named transition. When React detects that a ViewTransition with a name is removed and a new ViewTransition with the same name is added during a transition, it activates a shared element transition that animates the element from one position to another.

View transition CSS pseudo-elements for animation styling

Use ::view-transition-old(class-name) and ::view-transition-new(class-name) CSS pseudo-elements to define animations for the old and new content during view transitions. For example, ::view-transition-old(.slide-forward) defines the animation for content leaving during a forward navigation, and ::view-transition-new(.slide-forward) defines the animation for content entering.

Example: ViewTransition with default animation class

<ViewTransition default="slow-fade"> {url === "/" ? <Home /> : <Details />} </ViewTransition> This example sets a default animation class 'slow-fade' that is applied to all content transitions within the ViewTransition. The content not included in shared element transitions will cross-fade according to this default animation.

Example: ViewTransition with addTransitionType for directional animations

Example: Disabling ViewTransition animations with default="none"

<ViewTransition default="none"> <div className="bottom"> <div className="content">{children}</div> </div> </ViewTransition> This example disables view transitions for the wrapped content by setting default to "none", allowing child elements to define their own ViewTransition with custom animations.

ViewTransition name prop for shared element transitions

When the name prop is provided to ViewTransition with a string value like 'video-1', it creates a shared element transition. This uses the default animation with no additional CSS needed, and the element will smoothly animate when transitioning between pages.

ViewTransition share prop maps transition types to CSS classes

The share prop accepts an object where keys are transition type names (e.g., 'nav-forward', 'nav-back') and values are CSS class names (e.g., 'slide-forward', 'slide-back'). These classes are applied to ::view-transition-old and ::view-transition-new pseudo-elements to customize animations based on the transition type.

ViewTransition default prop sets fallback animation

The default prop on ViewTransition specifies the CSS class name to use for animations when no specific transition type is provided. For example, default="slow-fade" or default="none" to opt-out of transitions.

addTransitionType function tags transition types

The addTransitionType function, imported from 'react', is called within a startTransition to label the cause of a transition. For example, addTransitionType('nav-forward') tags the transition as a forward navigation, which can then be matched by ViewTransition's share prop to apply specific CSS classes.

View Transition API CSS pseudo-elements for animations

The ::view-transition-old and ::view-transition-new CSS pseudo-elements target the old and new states during transitions. They can be combined with class selectors like ::view-transition-old(.slide-forward) and ::view-transition-new(.slide-forward) to apply specific animations based on transition type.

Example: ViewTransition with shared element name

<ViewTransition name={`video-${video.id}`}> <div className="thumbnail"> {children} </div> </ViewTransition> This creates a shared element transition for a video thumbnail that will smoothly animate when navigating between pages.

Example: ViewTransition with share object for navigation types

<ViewTransition name="nav" share={{ 'nav-forward': 'slide-forward', 'nav-back': 'slide-back', }}> {heading} </ViewTransition> This applies different CSS classes ('slide-forward' or 'slide-back') based on the transition type set by addTransitionType.

Example: ViewTransition opting out with default="none"

<ViewTransition default="none"> <div className="bottom"> <div className="content">{children}</div> </div> </ViewTransition> This disables view transitions for the specified subtree.

ViewTransition with named shared element transitions

Use the name prop on ViewTransition to enable shared element transitions between components with the same name. The share prop maps transition type identifiers to CSS class names for custom animations based on the transition cause. Example: <ViewTransition name="video-1" share={{'nav-forward': 'slide-forward'}}>content</ViewTransition>

ViewTransition with default animations

The default prop on ViewTransition specifies a default CSS class name to use for animations when no other animation is specified. Setting default="none" disables default animations for that element. Setting default="slow-fade" applies a slow fade animation with 500ms duration.

ViewTransition enter and exit props for Suspense

Use the enter prop to specify the CSS class for content entering, and the exit prop to specify the CSS class for Suspense fallback content exiting. Example: <Suspense fallback={<ViewTransition exit="slide-down"><Fallback /></ViewTransition>}><ViewTransition enter="slide-up"><Content /></ViewTransition></Suspense>

ViewTransition for animating list items

Wrap each item in a list with ViewTransition using the item's unique key to animate list reordering. Use useDeferredValue to trigger animations when filtered results change. Example: filteredVideos.map((video) => <ViewTransition key={video.id}><Video video={video} /></ViewTransition>)

addTransitionType function for named transitions

Call addTransitionType with a string identifier to label a transition with a specific name. This identifier is matched against the share prop keys in ViewTransition components to apply appropriate animations. Example: addTransitionType('nav-forward') inside a transition will apply animations mapped to 'nav-forward' in ViewTransition share objects.

ViewTransition CSS pseudo-elements for animations

Use ::view-transition-old(classname) and ::view-transition-new(classname) CSS pseudo-elements to define animations for transitioning elements. Old elements are those being replaced, new elements are those being shown. Animation examples: ::view-transition-old(.slide-forward) { animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; }

ViewTransition component signature and props

ViewTransition is a React component that wraps UI elements to apply view transitions. It accepts the following props: name (string, optional) to identify the transition target; share (object, optional) mapping transition types to CSS class names; enter (string, optional) for entry animation class; exit (string, optional) for exit animation class; default (string, optional) set to "none" to opt-out of default transitions. When mode is 'visible', children render normally with transitions applied. When nested in another ViewTransition with default="none", the inner ViewTransition controls its own animations.

ViewTransition default prop to disable transitions

The ViewTransition component accepts a default prop that can be set to "none" to opt-out of default transitions for that subtree. This allows nested content areas to control their own transitions independently. For example, <ViewTransition default="none"><content /></ViewTransition> disables automatic transitions for the content while allowing child ViewTransition components to define custom transitions.

ViewTransition share prop mapping transitions to classes

The share prop on ViewTransition is an object that maps transition type identifiers to CSS class names. When addTransitionType is called with an identifier like 'nav-forward', ViewTransition components with share={{"nav-forward": "slide-forward"}} will apply the "slide-forward" class to enable corresponding CSS animations. Different navigation directions can trigger different animation classes via this mapping.

ViewTransition enter and exit props for Suspense

ViewTransition accepts enter and exit props to specify CSS class names for animation timing with Suspense. The exit prop applies a class when content is unmounting (showing fallback), while the enter prop applies a class when content is mounting (replacing fallback). For example, <ViewTransition exit="slide-down"><Fallback/></ViewTransition> animates the fallback with slide-down class, while <ViewTransition enter="slide-up"><Content/></ViewTransition> animates the content in with slide-up class.

ViewTransition name prop for shared element transitions

The name prop on ViewTransition identifies an element for shared element transitions. Elements with the same name in source and destination states are animated as a continuous element across the transition. Multiple elements can have unique names to animate different parts of the UI. The name is a string identifier, commonly using patterns like `video-${video.id}` or `nav` to group related transitions.

ViewTransition component signature and props

The ViewTransition component accepts a 'name' prop to name the transition, a 'share' prop that is an object mapping class names to animation class names, and a 'default' prop that can be set to 'none' to opt-out of transitions. ViewTransition wraps child elements and is used to apply view transition animations. Example: <ViewTransition name="nav" share={{'nav-forward': 'slide-forward', 'nav-back': 'slide-back'}}>{children}</ViewTransition>

ViewTransition default prop to opt-out of transitions

ViewTransition can be used with default="none" to opt out of view transitions for its children. This allows child components to define their own ViewTransition instead.

ViewTransition component code example with share prop

import {ViewTransition} from 'react'; export default function Page({ heading, children }) { return ( <div className="page"> <div className="top-nav"> <ViewTransition name="nav" share={{ 'nav-forward': 'slide-forward', 'nav-back': 'slide-back', }}> {heading} </ViewTransition> </div> <ViewTransition default="none"> <div className="bottom"> <div className="content">{children}</div> </div> </ViewTransition> </div> ); }

Give your agent this brain