Hook / With Events
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,
EVT_SCROLL_SIZE,
EVT_RANGE
} 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 WithEvents = () => {
const model = useVirtual({
itemCount: 50000
});
return (
<div className="h-full overflow-auto relative" ref={model.setOuterNode}>
<Subscription model={model} events={[EVT_SCROLL_SIZE]}>
{() => (
<div
className="invisible absolute top-0 left-0 w-px"
style={{ height: model.scrollSize }}
/>
)}
</Subscription>
<Subscription model={model} events={[EVT_RANGE]}>
{() => (
<>
<div
className="invisible w-px"
style={{ height: model.getOffset(model.from) }}
/>
{mapVisibleRange(model, i => (
<Item key={i} i={i} model={model} />
))}
</>
)}
</Subscription>
</div>
);
};
export default WithEvents;