Example of wrapping react-window

[masenf]

from typing import Any
import reflex as rx

from faker import Faker

faker = Faker()


class ReactWindowList(rx.Component):
    """Based on example at https://react-window.vercel.app/list/fixed-row-height"""
    library = "react-window"
    tag = "List"
    alias = "ReactWindowList"

    row_component: rx.Var[Any]
    row_count: rx.Var[int]
    row_height: rx.Var[int]
    row_props: rx.Var[dict]


class State(rx.State):
    items: rx.Field[list[str]] = rx.field(
        default_factory=lambda: [faker.name() for _ in range(1000)]
    )


@rx.memo
def row_renderer(index: int, style: dict, items: list[str]) -> rx.Component:
    """Render a single row in the react window list.

    Args:
        index: The index of the item.
        style: The style to apply to the item.
        items: The list of items.

    Returns:
        The row component.
    """
    return rx.hstack(
        rx.text(items[index]),
        rx.spacer(),
        rx.text(f"Item #{index}", color_scheme="gray", size="1"),
        style=style,
        padding="10px",
        border_bottom="1px solid #ccc",
        align="center",
    )


def index() -> rx.Component:
    return rx.container(
        rx.color_mode.button(position="top-right"),
        rx.vstack(
            rx.heading("Welcome to Reflex!", size="9"),
            ReactWindowList.create(
                row_component=row_renderer,
                row_count=State.items.length(),
                row_height=40,
                row_props={"items": State.items},
                width="100%",
            ),
        ),
    )


app = rx.App()
app.add_page(index)

The key to making this work is to define the rowComponent as an rx.memo component so that it gets defined separately and can be passed in to the List component by name.