Skip to content

VirtualizerProps.md

Latest commit

 

History

History
206 lines (107 loc) · 6.14 KB

VirtualizerProps.md

File metadata and controls

206 lines (107 loc) · 6.14 KB

API

Interface: VirtualizerProps<T>

Defined in: src/react/Virtualizer.tsx:95

Props of Virtualizer.

Type Parameters

T

T = unknown

Properties

children

children: ReactNode | (data, index) => ReactElement

Defined in: src/react/Virtualizer.tsx:101

Elements rendered by this component.

You can also pass a function and set VirtualizerProps.data to create elements lazily.

data?

optional data: ArrayLike<T>

Defined in: src/react/Virtualizer.tsx:105

The data items rendered by this component. If you set a function to VirtualizerProps.children, you have to set this prop.

overscan?

optional overscan: number

Defined in: src/react/Virtualizer.tsx:110

Number of items to render above/below the visible bounds of the list. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.

Default Value

4

itemSize?

optional itemSize: number

Defined in: src/react/Virtualizer.tsx:117

Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.

  • If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
  • If set, you can opt out estimation and use the value as initial item size.

shift?

optional shift: boolean

Defined in: src/react/Virtualizer.tsx:121

While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.

horizontal?

optional horizontal: boolean

Defined in: src/react/Virtualizer.tsx:125

If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.

keepMounted?

optional keepMounted: readonly number[]

Defined in: src/react/Virtualizer.tsx:129

List of indexes that should be always mounted, even when off screen.

cache?

optional cache: CacheSnapshot

Defined in: src/react/Virtualizer.tsx:135

You can restore cache by passing a CacheSnapshot on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from VirtualizerHandle.cache.

The length of items should be the same as when you take the snapshot, otherwise restoration may not work as expected.

startMargin?

optional startMargin: number

Defined in: src/react/Virtualizer.tsx:139

If you put an element before virtualizer, you have to define its height with this prop.

ssrCount?

optional ssrCount: number

Defined in: src/react/Virtualizer.tsx:143

A prop for SSR. If set, the specified amount of items will be mounted in the initial rendering regardless of the container size until hydrated.

as?

optional as: CustomContainerComponent | keyof IntrinsicElements

Defined in: src/react/Virtualizer.tsx:148

Component or element type for container element.

Default Value

"div"

item?

optional item: CustomItemComponent | keyof IntrinsicElements

Defined in: src/react/Virtualizer.tsx:153

Component or element type for item element. This component will get CustomItemComponentProps as props.

Default Value

"div"

scrollRef?

optional scrollRef: RefObject<null | HTMLElement>

Defined in: src/react/Virtualizer.tsx:157

Reference to the scrollable element. The default will get the direct parent element of virtualizer.

onScroll()?

optional onScroll: (offset) => void

Defined in: src/react/Virtualizer.tsx:162

Callback invoked whenever scroll offset changes.

Parameters

offset

number

Current scrollTop, or scrollLeft if horizontal: true.

Returns

void

onScrollEnd()?

optional onScrollEnd: () => void

Defined in: src/react/Virtualizer.tsx:166

Callback invoked when scrolling stops.

Returns

void