"scroll-area" viewport access

[Rafirvan]

Hello there, i want to share a component edit i have been using. a conditionally invoked access to Radix's scrollAreaViewport component. scrollAreaViewport gives access to "onScroll" prop, and some important css like scroll snapping and overscroll behaviour among others.

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "~/utils/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
  >(({ className, children, ...props }, ref) => {
  // check if user uses scrollAreaViewport...
  const hasViewportChild = React.Children.toArray(children).some(
    (child) => React.isValidElement(child) && child.type === ScrollAreaViewport
  );

  return (
    <ScrollAreaPrimitive.Root
      ref={ref}
      className={cn("relative overflow-hidden", className)}
      {...props}
    >

      {/*...then renders conditionally */}
      {hasViewportChild ? (children)
        :
        (
        <ScrollAreaViewport>
          {children}
        </ScrollAreaViewport>
      )}
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  );
});
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollAreaViewport = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>
  >(({ className, children, ...props }, ref) =>
  {
    return(
  <ScrollAreaPrimitive.Viewport
    ref={ref}
    className={cn("h-full w-full rounded-[inherit]", className)}
    {...props}
  >
    {children}
  </ScrollAreaPrimitive.Viewport>
  )}
);
  
ScrollAreaViewport.displayName = ScrollAreaPrimitive.ScrollAreaViewport.displayName;


const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
      "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
      "h-2.5 border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-slate-200 dark:bg-slate-800" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollAreaViewport ,ScrollBar }

now you can either use
<ScrollArea className="...">{children}</ScrollArea>

or

<ScrollArea className="..."> <ScrollAreaViewport className="..."> {children} </ScrollAreaViewport> </ScrollArea>

to access viewport props and classes.

this code uses the "default" theme styling, so update the style accordingly

if there is any bugs related to this please report back here. Cheers.

[damien-schneider]

I completely agree—this is a crucial improvement. Typically, the classes or refs passed to the root component aren’t as necessary as those applied to the viewport. Ideally, these should be forwarded directly to the viewport by default. This change would make the base component much more flexible and practical for most use cases.

And so the solution you've provided is even better and more flexible, it's the only component where I often use the radix primite directly for those reasons.