Components

Refreshable

Refreshable adapts SwiftUI's .refreshable modifier into an explicit web container with a refresh affordance and busy state.

Example

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

Default

Loading preview…

Code
'use client';
import { useState } from 'react';
import { Text } from '@swiftuijs/ui';
import { Refreshable } from '@swiftuijs/ui';
export default function Example() {
    function Demo() {
        const [updatedAt, setUpdatedAt] = useState('Never');
        return (<Refreshable onRefresh={async () => {
                await new Promise((resolve) => setTimeout(resolve, 300));
                setUpdatedAt(new Date().toLocaleTimeString());
            }}>
          <div style={{ padding: 16, border: '1px solid var(--sw-color-gray-4, #d1d5db)', borderRadius: 16 }}>
            <Text>Last updated: {updatedAt}</Text>
          </div>
        </Refreshable>);
    }
    return <Demo />;
}

More examples

With Toolbar

API reference

PropTypeRequiredDescription
onRefresh() => Promise<void> | voidYes—
isRefreshingbooleanNo—
refreshLabelstringNo—
refreshingLabelstringNo—
toolbarReactNodeNo—

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Redacted

Redacted adapts SwiftUI's `redacted` modifier into an explicit placeholder or privacy wrapper on the web.

SafeArea

Inset content using browser safe-area environment variables.