Open jjenzz opened 2 years ago
Linked to #750
@jjenzz I might be too late but here's a pretty easy way to combine ScrollArea with react-virtuoso using customScrollParent
:
https://codesandbox.io/p/sandbox/wispy-field-g8w2t3?file=%2FApp.jsx
const TAGS = Array.from({ length: 500 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`
);
const ScrollAreaDemo = () => {
const [scrollParent, setScrollParent] = useState();
return (
<ScrollArea.Root className="ScrollAreaRoot">
<ScrollArea.Viewport className="ScrollAreaViewport" ref={setScrollParent}>
<Virtuoso
data={TAGS}
itemContent={(index, tag) => <div className="Tag">{tag}</div>}
customScrollParent={scrollParent ?? undefined}
/>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className="ScrollAreaScrollbar"
orientation="vertical"
>
<ScrollArea.Thumb className="ScrollAreaThumb" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
);
};
example with react-window
partial code :
<ScrollArea.Root className="ScrollAreaRoot">
<List
height={250}
itemCount={TAGS.length}
itemData={TAGS}
itemSize={35}
outerElementType={ScrollArea.Viewport}
>
{Row}
</List>
<ScrollArea.Scrollbar
className="ScrollAreaScrollbar"
orientation="vertical"
>
<ScrollArea.Thumb className="ScrollAreaThumb" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
Discussed in https://github.com/radix-ui/primitives/discussions/1078