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.interpolatefalls back to opacity. Text/number interpolation and an outgoing-content crossfade are not implemented.
More examples
Scale
API reference
| Prop | Type | Required | Description |
|---|---|---|---|
transition | 'opacity' | 'interpolate' | 'scale' | No | — |
active | boolean | No | — |
Inherits additional props from IBaseComponent.