Components

ForEach

Render an array with a stable key and a render function.

Example

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

Default

Loading preview…

Code
'use client';
import { Text } from '@swiftuijs/ui';
import { ForEach } from '@swiftuijs/ui';
type Item = {
    id: number;
    name: string;
    value: number;
};
const items: Item[] = [
    { id: 1, name: 'Item 1', value: 10 },
    { id: 2, name: 'Item 2', value: 20 },
    { id: 3, name: 'Item 3', value: 30 }
];
export default function Example() {
    return (<ForEach data={items} keyExtractor={(item) => item.id} renderItem={(item) => (<Text>{item.name} - Value: {item.value}</Text>)}></ForEach>);
}

Usage and limitations

  • Provide data, keyExtractor, and renderItem. renderItem receives each item and its index.
  • keyExtractor must return a unique, stable key; TypeScript infers item types from data.
  • This is ordinary React array rendering: all items mount. It does not virtualize or provide a performance advantage over .map().
  • Use a lazy stack/grid for large scrolling datasets.

More examples

In VStack
With Index
With Buttons
Complex Items

API reference

PropTypeRequiredDescription
dataT[]YesThe array of data to iterate over.
keyExtractor(item: T, index: number) => string | numberYesFunction to extract a unique key from each item.
renderItem(item: T, index: number) => ReactNodeYesFunction to render each item.
Edit this page on GitHubReport an issue

FileImporter

FileImporter presents a button-backed file picker and forwards selected files to your app.

Form

Group input controls in a native HTML form.