Components

ScrollViewReader

ScrollViewReader exposes a proxy that can scroll to child `ScrollTarget` anchors by identifier.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

<ScrollViewReader>
      {(proxy) => (
        <VStack spacing={12}>
          <Button onClick={() => proxy.scrollTo('details', { behavior: 'smooth', block: 'nearest' })}>
            Jump to details
          </Button>
          <ScrollView style={{ height: '220px' }}>
            <VStack spacing={16}>
              <ScrollTarget scrollId="summary">
                <div style={{ minHeight: '180px' }}>Summary section</div>
              </ScrollTarget>
              <ScrollTarget scrollId="details">
                <div style={{ minHeight: '180px' }}>Details section</div>
              </ScrollTarget>
            </VStack>
          </ScrollView>
        </VStack>
      )}
    </ScrollViewReader>

API

Prop	Type	Required	Description
`children`	`(proxy: IScrollViewProxy) => React.ReactNode`	Yes	No description yet.

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

Overview

ScrollViewReader exposes a proxy that can scroll to child ScrollTarget anchors by identifier.

Status: adapted

SwiftUI Correspondence: Adapted from SwiftUI's ScrollViewReader.

Notes

scrollTo(id) resolves descendants marked with ScrollTarget
the current web adaptation uses scrollIntoView() under the hood
keep target identifiers stable across renders so imperative scrolling remains deterministic

ScrollView

ScrollView is a scrollable view that allows users to scroll through content that exceeds the visible area. ScrollView supports both vertical and horizontal scrolling.

SearchField

SearchField provides a dedicated search input with a value-first callback, aligned with SwiftUI's searchable input patterns while remaining an explicit web control.

ScrollViewReader

Examples

API

Overview

Notes

On this page