Components

TimelineView

TimelineView re-renders its content on a fixed cadence, matching SwiftUI's scheduled-update mental model with a simple interval-based web adaptation.

Example

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

Clock

Loading preview…

Code
'use client';
import type { ComponentProps } from 'react';
import { TimelineView } from '@swiftuijs/ui';
export default function Example() {
    const args: ComponentProps<typeof TimelineView> = { ...{
            children: () => null,
            interval: 1000,
        }, ...{
            interval: 1000,
        } };
    return ((<TimelineView {...args}>
      {(date) => <output>{date.toLocaleTimeString()}</output>}
    </TimelineView>));
}

Status: adapted

Usage and limitations

  • The current web implementation uses setInterval.

  • The child render function receives the latest Date for each tick.

  • interval is milliseconds and should be positive. Browser timers can be throttled in background tabs. The initial Date is created independently on server and client; render time-dependent text only after mounting when using SSR.

API reference

PropTypeRequiredDescription
intervalnumberYes—
children(date: Date) => ReactNodeYes—

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

Edit this page on GitHubReport an issue

TextSelection

TextSelection adapts SwiftUI's `textSelection(_:)` modifier into an explicit wrapper that controls browser text selection semantics.

Toggle

Turn a boolean setting on or off.