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;