feat(registry): add viewportRef prop to allow forwarding ref to Viewport

[bbjbc]

Is this a bug report or a feature request?

Feature Request

Problem

Currently, the ScrollArea component does not provide a way to access a ref to the inner ScrollAreaPrimitive.Viewport element. This makes it difficult to integrate with libraries that require a reference to the actual scrolling container, such as virtualization libraries like @tanstack/react-virtual.

When trying to implement a virtualized list inside ScrollArea, the virtualizer cannot detect scroll events because the ref can only be attached to the ScrollAreaPrimitive.Root element, which is not the scrolling element.

Solution

I propose adding an optional viewportRef prop to the ScrollArea component. This prop will be forwarded directly to the underlying ScrollAreaPrimitive.Viewport.

This provides a clean escape hatch for developers who need direct access to the viewport DOM node, without changing the existing API.

Example Code Change in scroll-area.tsx

type Props = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
  viewportRef?: React.Ref<HTMLDivElement>;
};

function ScrollArea({ className, children, viewportRef, ...props }: Props) {
  return (
    <ScrollAreaPrimitive.Root {...props}>
      <ScrollAreaPrimitive.Viewport ref={viewportRef}>
        {children}
      </ScrollAreaPrimitive.Viewport>

      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  );
}

Example Usage

const parentRef = React.useRef<HTMLDivElement>(null);

const rowVirtualizer = useVirtualizer({
  getScrollElement: () => parentRef.current,
  // ...
});

return (
  <ScrollArea
    viewportRef={parentRef}
  >
    <div style={{ height: `${rowVirtualizer.getTotalSize()}px` }}>
    // ...
   {/* Virtualized content... */}
  )
);

Benefits

• Greatly enhances interoperability with third-party libraries.
• Directly enables high-performance virtualized lists within ScrollArea.
• The new prop is optional and does not affect existing users.

This would be a valuable addition for building complex and high-performance UIs. I'm happy to open a PR for this change.

[vercel]

@bbjbc is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.