React-custom-scrollbars: React-custom-scrollbars with react-select

[Raghava19]

Hi,
How to use, React custom scroll bar with React Select.
https://github.com/malte-wessel/react-custom-scrollbars/pull/305

Now my code is like this:

import React from 'react';
import './App.css';
import Select from 'react-select';
import { Scrollbars } from 'react-custom-scrollbars';

const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];

class App extends React.Component {
state = {
selectedOption: null,
};
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(Option selected:, selectedOption);
};
render() {
const { selectedOption } = this.state;

return (
<div>
<Scrollbars style={{ width: 500, height: 300 }}>
   <Select
     value={selectedOption}
     onChange={this.handleChange}
     options={options}
   />
  </Scrollbars>
  </div>
);

}
}

[cseas]

You need to replace the MenuList component in react-select with a custom one that uses react-custom-scrollbars.

// CustomMenuList.tsx
import React from "react";
import { Scrollbars } from "react-custom-scrollbars";

export const MenuList = (props: any) => {
  return (
    <div style={{ height: 200 }}>
      <Scrollbars renderThumbVertical={renderThumbVertical}>
        {props.children}
      </Scrollbars>
    </div>
  );
};

// scrollbar styles
function renderThumbVertical({ style, ...props }: { style: any }) {
  return (
    <div
      {...props}
      style={{
        ...style,
        backgroundColor: "red",
        width: "0.3rem",
        opacity: "1",
      }}
    />
  );
}

Then just add the above custom component to your Select and set captureMenuScroll to false:

import { MenuList } from "./CustomMenuList"
...
<Select 
  components={{ MenuList }}
  captureMenuScroll={false}
/>