Skip to main content

List

List quickstart

import { List } from "@resembli/react-virtualized-window"

const sampleData = Array.from({ length: 5000 }, (_, i) => i)

const Row = ({ data, style }) => {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
background: data % 2 ? "black" : "white",
color: data % 2 ? "white" : "black",
...style, // Important you spread the style object
}}
>
{data}
</div>
)
}

export function BasicListExample() {
return (
<div style={{ width: "100%", height: 400 }}>
<List defaultSize={50} data={sampleData}>
{Row}
</List>
</div>
)
}

Horizontal List Quickstart

import { List } from "@resembli/react-virtualized-window"

const sampleData = Array.from({ length: 5000 }, (_, i) => i)

const Row = ({ data, style }) => {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
background: data % 2 ? "black" : "white",
color: data % 2 ? "white" : "black",
...style, // Important you spread the style object
}}
>
{data}
</div>
)
}

export function BasicListHorizontal() {
return (
<div style={{ width: "100%", height: 400 }}>
<List defaultSize={50} data={sampleData} layout="horizontal">
{Row}
</List>
</div>
)
}

Props

Required

Property NameTypeDescription
dataT[]An array of data items. Individual items can be any type.
sizeNumberOrPercentThe px size per row item, or the percent size per row item. Percent size is based on window height or width (dependent on layout) less any gap height applied.
childrenRenderItemThe component for rendering each item. Should accept a property called style of type CSSProperties.

Optional

Property NameTypeDescription
layout"horizontal" or "vertical"Determines the direction of the list component.
sizesNumberOrPercent[]An array of sizes to use for individual items. Used to support variable sized items.
getKey(data: T) => stringA function that is provided with a data item, and should return a string to use as a key for an individual item.
tabIndexnumberTab index for the containing window div.
overscannumberHow many items out of view to overscan, useful when sticky position is disabled, or tab index is enabled.
apiRefMutableRefObjectA ref object to capture the window api for imperative actions.
classNamestringClassName to apply to containing window div.
styleCSSPropertiesCSSProperties style object.
disableStickybooleanDisables the sticky div handling, which means content may flash in when the user scrolls quickly.
onScrollUIEventHandlerUser provided onScroll callback.
widthCSSProperties['Width']Width value to use for sizing the component.
heightCSSProperties['Height']Height value to use for sizing the component.
data-testidstringA string for finding the window when testing.