[ScrollArea] How can I do virtualized lists with the ScrollArea primitive?

[davbrito]

There are several good packages for making virtualized lists. We have react-virtual, react-virtualized, react-virtuoso, react-window, etc.

What would be the "official" or recommended approach for doing that kind of list with the ScrollArea primitive, and what library is best suited for the job?

I've tried to do it in the past with no success. If you have had some experience doing it, please share your approach.

[funwithtriangles]

@davbrito did you have any luck with this? Also in the same situation!

[topolanekmartin]

@benoitgrelard Thanks! I use shadcn and didn't realize I must change its default code. Now it is working when I pass ref to Viewport component and not Root 🙂

[ahkohd]

Following @topolanekmartin's comment, it works!

[cathaysia]

could anyone paste the key code?

[cathaysia]

just copy code from '@/components/ui/scroll-area.tsx' and move {ref} from <ScrollAreaPrimitive.Root> to ScrollAreaPrimitive.Viewport

const ScrollArea = React.forwardRef<
    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
    <ScrollAreaPrimitive.Root
        className={cn("relative overflow-hidden", className)}
        {...props}
    >
        <ScrollAreaPrimitive.Viewport  ref={ref} className="h-full w-full rounded-[inherit]">
            {children}
        </ScrollAreaPrimitive.Viewport>
        <ScrollBar />
        <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
));

[Darko]

just copy code from '@/components/ui/scroll-area.tsx' and move {ref} from <ScrollAreaPrimitive.Root> to ScrollAreaPrimitive.Viewport

const ScrollArea = React.forwardRef<
    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
    <ScrollAreaPrimitive.Root
        className={cn("relative overflow-hidden", className)}
        {...props}
    >
        <ScrollAreaPrimitive.Viewport  ref={ref} className="h-full w-full rounded-[inherit]">
            {children}
        </ScrollAreaPrimitive.Viewport>
        <ScrollBar />
        <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
));

I think you can also expose a prop viewportRef, this way you can also keep a ref to both the Root and Viewport elements if it's ever necessary.