Components

ScrollViewReader

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

Example

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

Default

Loading preview…

Code
'use client';
import { Button } from '@swiftuijs/ui';
import { ScrollTarget } from '@swiftuijs/ui';
import { ScrollView } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { ScrollViewReader } from '@swiftuijs/ui';
export default function Example() {
    return ((<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>));
}

Status: adapted

Usage and limitations

  • 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

API reference

PropTypeRequiredDescription
children(proxy: IScrollViewProxy) => React.ReactNodeYes—

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

Edit this page on GitHubReport an issue

ScrollView

Scroll content vertically or horizontally inside a bounded container.

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.