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}
/>