react-virtualized and react-custom-scrollbars integration

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