List
List quickstart​
- JavaScript
- TypeScript
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>
)
}
import type { RenderItem } from "@resembli/react-virtualized-window"
import { List } from "@resembli/react-virtualized-window"
const sampleData = Array.from({ length: 5000 }, (_, i) => i)
const Row: RenderItem<number> = ({ 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​
- JavaScript
- TypeScript
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>
)
}
import type { RenderItem } from "@resembli/react-virtualized-window"
import { List } from "@resembli/react-virtualized-window"
const sampleData = Array.from({ length: 5000 }, (_, i) => i)
const Row: RenderItem<number> = ({ 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 Name | Type | Description |
---|---|---|
data | T[] | An array of data items. Individual items can be any type. |
size | NumberOrPercent | The 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. |
children | RenderItem | The component for rendering each item. Should accept a property called style of type CSSProperties . |
Optional​
Property Name | Type | Description |
---|---|---|
layout | "horizontal" or "vertical" | Determines the direction of the list component. |
sizes | NumberOrPercent[] | An array of sizes to use for individual items. Used to support variable sized items. |
getKey | (data: T) => string | A function that is provided with a data item, and should return a string to use as a key for an individual item. |
tabIndex | number | Tab index for the containing window div . |
overscan | number | How many items out of view to overscan, useful when sticky position is disabled, or tab index is enabled. |
apiRef | MutableRefObject | A ref object to capture the window api for imperative actions. |
className | string | ClassName to apply to containing window div . |
style | CSSProperties | CSSProperties style object. |
disableSticky | boolean | Disables the sticky div handling, which means content may flash in when the user scrolls quickly. |
onScroll | UIEventHandler | User provided onScroll callback. |
width | CSSProperties['Width'] | Width value to use for sizing the component. |
height | CSSProperties['Height'] | Height value to use for sizing the component. |
data-testid | string | A string for finding the window when testing. |