Ability to add custom scrollbar for VList #297
Answered
by
inokawa
adventofryz
asked this question in
Q&A
-
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:
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. |
Beta Was this translation helpful? Give feedback.
Answered by
inokawa
Dec 26, 2023
Replies: 1 comment 4 replies
-
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>
);
} |
Beta Was this translation helpful? Give feedback.
4 replies
Answer selected by
adventofryz
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This looks working: