af-utils / virtual

Hook / Simple

Loading example...
row 0
row 1
row 2
row 3
row 4
row 5
row 6
row 7
import { memo } from "react";

import {
    useVirtual,
    mapVisibleRange,
    Subscription
} from "@af-utils/react-virtual-headless";

const Item = memo(({ i, model }) => (
    <div ref={el => model.el(i, el)} className="border-t p-2 border-zinc-400">
        row {i}
    </div>
));

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

    return (
        <div className="h-full overflow-auto" ref={model.setOuterNode}>
            <Subscription model={model}>
                {() => {
                    const fromOffset = model.getOffset(model.from);

                    return (
                        <div
                            style={{
                                height: model.scrollSize - fromOffset,
                                marginTop: fromOffset
                            }}
                        >
                            {mapVisibleRange(model, i => (
                                <Item key={i} model={model} i={i} />
                            ))}
                        </div>
                    );
                }}
            </Subscription>
        </div>
    );
};

export default SimpleHook;