SwiftUI.js
Components

ViewThatFits

ViewThatFits picks the first layout variant that fits the available width. The web version uses `data-min-width` hints on child views to choose an appropriate variant.

ViewThatFits picks the first layout variant that fits the available width. The web version uses `data-min-width` hints on child views to choose an appropriate variant.

Examples

Default

Preview unavailable for this example in the static docs build.

Show code
<ViewThatFits width={320}>
      <HStack data-min-width={520} spacing={16}>
        <Card><Text>Sidebar</Text></Card>
        <Card><Text>Detail</Text></Card>
      </HStack>
      <VStack data-min-width={300} spacing={12}>
        <Card><Text>Compact content</Text></Card>
        <Card><Text>Secondary section</Text></Card>
      </VStack>
      <Card>
        <Text>Fallback content</Text>
      </Card>
    </ViewThatFits>

API

PropTypeRequiredDescription
widthnumberNoExplicit width used to evaluate fitting children. When omitted the component behaves like a simple fallback container.

Inherits additional props from IBaseComponent.

Overview

ViewThatFits picks the first layout variant that fits the available width. The web version uses data-min-width hints on child views to choose an appropriate variant.

Notes

  • Order children from most spacious to most compact.
  • Use width when you want deterministic layout selection in docs or tests.

VideoPlayer

VideoPlayer wraps the native browser video element while keeping SwiftUI's dedicated media-player mental model.

VisualEffect

VisualEffect adapts SwiftUI's visual-effect modifiers into an explicit surface wrapper for the web.

On this page

OverviewNotes