react-virtualized and react-custom-scrollbars integration - react-virtualized

Question

I am trying to integrate a custom scrollbar (using react-custom-scrollbars: https://github.com/malte-wessel/react-custom-scrollbars) for a Grid component (using react-virtualized).
I have tried to follow instruction from this github issue (https://github.com/bvaughn/react-virtualized/issues/143), but there has been no luck.
Any insight on using these two libraries together would be really appreciated!
Update: after searching in gitter room of react-virtualized, I followed one suggestion that using perfect-scrollbar package (instead of react-custom-scrollbars) and react-virtualized together. They work well so far.

Answer 1

You can wrap Grid in react-custom-scrollbars and pass down onScroll event. This code works for me.
import React from 'react';
import { Grid } from 'react-virtualized';
import { Scrollbars } from 'react-custom-scrollbars';
class ScrollableGrid extends React.Component {
handleScroll = ({ target }) => {
const { scrollTop, scrollLeft } = target;
this.Grid.handleScrollEvent({ scrollTop, scrollLeft });
};
Grid = null;
render() {
const { width, height } = this.props;
return (
<Scrollbars autoHide style={{ width, height }} onScroll={this.handleScroll}>
<Grid
{...this.props}
ref={instance => (this.Grid = instance)}
style={{
overflowX: false,
overflowY: false
}}
/>
</Scrollbars>
);
}
}
const list = [
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125]
];
ReactDOM.render(
<ScrollableGrid
cellRenderer={({ columnIndex, key, rowIndex, style }) => {
return (
<div key={key} style={style}>
{list[rowIndex][columnIndex]}
</div>
);
}}
columnCount={list[0].length}
columnWidth={100}
height={300}
rowCount={list.length}
rowHeight={30}
width={300}
/>,
document.getElementById('example')
);
You can see example with List and some more context in github issue