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.

Any links on how to reach custom scrollbar with react-virtualized, please? — Vitalik Teremasov, Jan 16 '17 at 11:11
I'm trying to do the same thing with the List component. Do you have any info on how you got them to work together? — Rob Clayburn, Feb 07 '17 at 16:25

score 0 · Answer 1 · answered Nov 20 '17 at 07:06

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

How would one go about adding an to that? I don't want my list to have static dimensions. — Paul, May 30 '18 at 00:44

react-virtualized and react-custom-scrollbars integration

1 Answers1