Components

ContentTransition

ContentTransition adapts SwiftUI's content-transition modifiers into brief feedback when its content changes.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Changing Content

Loading preview…

Code
'use client';
import { useState } from 'react';
import { Button } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
import { ContentTransition } from '@swiftuijs/ui';
export default function Example() {
    const [count, setCount] = useState(0);
    return <div>
      <ContentTransition transition="scale"><Text>{count} items</Text></ContentTransition>
      <Button onClick={() => setCount(value => value + 1)}>Add item</Button>
    </div>;
}

Usage and limitations

  • Changed content fades in; transition="scale" also settles from 96% to its authored size. Rapid updates replace the previous feedback.
  • active={false} and the system's Reduce Motion setting disable feedback. Browsers without Web Animations show the updated content immediately.
  • interpolate falls back to opacity. Text/number interpolation and an outgoing-content crossfade are not implemented.

More examples

Scale

API reference

PropTypeRequiredDescription
transition'opacity' | 'interpolate' | 'scale'No—
activebooleanNo—

Inherits additional props from IBaseComponent.