List

A simple, non-virtual list where every item stays mounted.

A regular, non-virtual list. Every item stays mounted and can have any height.

ListProps<T> generic packages/core/src/list.ts:12 ↗

Import

import { List } from "@tarve/core";

Usage

List.tsx

import { List, Text } from "@tarve/core";

const tasks = ["Write docs", "Ship v0.4", "Celebrate"];

<List
  items={tasks}
  gap={8}
  keyForItem={(task) => task}
  renderItem={(task, index) => <Text>{index + 1}. {task}</Text>}
/>

Props

Prop	Type	Default
`gap`	`number`	`0`
`items`	`readonly T[]`	—
`keyForItem`	`(item: T, index: number) => string \| number`	—
`renderItem`	`(item: T, index: number) => Child`	—

Inherited from ViewProps 10 props

Prop	Type	Default
`align`	`Style["align"]`	—
`dismissOnOutside`	`boolean`	—
`dragRegion`	`boolean`	—
`flex`	`number`	—
`focusable`	`boolean`	—
`justify`	`Style["justify"]`	—
`onOutsideClick`	`() => void`	—
`padding`	`Style["padding"]`	—
`portal`	`boolean`	—
`windowAction`	`"minimize" \| "toggleMaximize" \| "close"`	—

Inherited from ScrollProps 4 props

Prop	Type	Default
`onScroll`	`(offset: number, max: number) => void`	—
`onScrollPosition`	`(position: ScrollPosition) => void`	—
`orientation`	`ScrollOrientation`	—
`speed`	`number`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

ScrollOrientation

type ScrollOrientation = "vertical" | "horizontal" | "both";

ScrollPosition

interface ScrollPosition { x: number; y: number; maxX: number; maxY: number }