List Component Reference

List component is used to create react virtual lists without writing boilerplate markup. Headless API should be used for more flexibility.

import { useVirtual, List } from "@af-utils/react-virtual-list";

const Item = ({ i }) => <div>{i}</div>;

const SimpleList = () => {
    const model = useVirtual({
        itemCount: 50000
    });

    return <List model={model}>{Item}</List>;
};

Installation

# npm
npm i -S @af-utils/styled @af-utils/react-virtual-list @af-utils/react-virtual-headless use-sync-external-store

# yarn
yarn add @af-utils/styled @af-utils/react-virtual-list @af-utils/react-virtual-headless use-sync-external-store

model: Model

Required. Return value of useVirtual

children: ReactElementType

Required. React component, that will have i prop when rendered.

component: ReactElementType

Defaults to: div. React component to render scrollable element.

itemData: Any

Will be passed as data prop to each Item.

getKey: Function(i, itemData) => any

Defaults to: i => i. If you have unique id to pass as key - it may be more efficient.

All other props are passed to outermost div.