Components

PhaseAnimator

PhaseAnimator sequences a finite set of named phases and re-renders your content with the current phase value.

Examples

Automatic Progression

Preview unavailable for this example in the static docs build.

Show code

<PhaseAnimator
      interval={900}
      phases={['idle', 'pressed', 'settled']}
    >
      {(phase) => (
        <Card>
          <VStack spacing={8} style={{ padding: '16px' }}>
            <Text style={{ fontWeight: 600 }}>Current phase</Text>
            <Text>{phase}</Text>
          </VStack>
        </Card>
      )}
    </PhaseAnimator>

On-Demand Progression

Preview unavailable for this example in the static docs build.

Show code

<PhaseAnimator
        phases={['collapsed', 'expanded', 'settled']}
        trigger="onDemand"
      >
        {(phase, controls) => {
          return (
            <VStack spacing={12}>
              <Card>
                <VStack spacing={8} style={{ padding: '16px' }}>
                  <Text style={{ fontWeight: 600 }}>Current phase</Text>
                  <Text>{phase}</Text>
                </VStack>
              </Card>
              <Button onClick={controls.advance}>Advance phase</Button>
            </VStack>
          )
        }}
      </PhaseAnimator>

API

Prop	Type	Required	Description
`children`	`(phase: TPhase, controls: IPhaseAnimatorControls<TPhase>) => React.ReactNode`	Yes	Render function for the current phase.
`interval`	`number`	No	Milliseconds between automatic phase changes. Default: `1000`
`phases`	`TPhase[]`	Yes	Ordered phases to cycle through.
`repeat`	`boolean`	No	Whether to wrap back to the first phase. Default: `true`
`trigger`	`PhaseAnimatorTrigger`	No	Animation trigger style. Default: `'automatic'`

Inherits additional props from Omit<IBaseComponent, 'children'>.

Overview

PhaseAnimator sequences a finite set of named phases and re-renders your content with the current phase value.

Status: adapted

SwiftUI Correspondence: Adapted from SwiftUI's PhaseAnimator.

Notes

phases is the ordered sequence of values exposed to the render function
trigger="automatic" advances on the configured interval
trigger="onDemand" lets the rendered content advance or reset through controls

PasteButton

PasteButton reads plain text from the clipboard and forwards it to your app, aligned with SwiftUI's clipboard action model.

PhotosPicker

PhotosPicker opens an image-only asset chooser and forwards selected files, keeping SwiftUI's media selection intent while relying on the browser's native file picker.

PhaseAnimator

Examples

API

Overview

Notes

On this page