List

List quickstart

JavaScript

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>
  )
}

TypeScript

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

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>
  )
}

TypeScript

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.