Ability to add custom scrollbar for VList

[adventofryz]

I am trying to use React simplebar with virtua but am not sure how to use this.

https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react

Typically we do something like this for third party virtualization libraries like react window:

<SimpleBar> {({ scrollableNodeRef, contentNodeRef }) => { return <div> Access to scrollable and content nodes </div>; }} </SimpleBar>

How do I use this with virtua?

I looked into the components for VList and thought of using component Root to pass the scrollbar through it but it doesn't work.

https://github.com/inokawa/virtua/blob/main/docs/interfaces/react.VListProps.md#components

[inokawa]

This looks working:

import SimpleBar from "simplebar-react";
import "simplebar-react/dist/simplebar.min.css";

const Root = forwardRef<HTMLDivElement, CustomViewportComponentProps>(
  ({ children, attrs, width, height, scrolling }, ref): ReactElement => {
    return (
      <SimpleBar scrollableNodeProps={{ref}} {...attrs}>
        <div
          style={useMemo((): CSSProperties => {
            return {
              position: "relative",
              visibility: "hidden",
              width: width ?? "100%",
              height: height ?? "100%",
              pointerEvents: scrolling ? "none" : "auto",
            };
          }, [width, height, scrolling])}
        >
          {children}
        </div>
      </SimpleBar>
    );
  }
);

const Comp = () => {
  return (
    <VList style={{ height: "100vh" }} components={{ Root }}>
      {createRows(1000)}
    </VList>
  );
}