React-select: How can I add custom scrollbar??

[hank7444]

I would like to use react-scrollbar as follow:

<ScrollArea>
   menu.....
</ScrollArea>

but I can't find any function that can do this, have any idea?

[primetwig]

import Select from 'react-select';

.Select-menu-outer { max-height: initial !important; }
.Select-menu { max-height: initial !important; }

menuRenderer = (params) => {

    // use default renderer in a hacky way
    const menu = Select.defaultProps.menuRenderer(params);

    const scrollBarProps = {
        autoHeight:    true,
        autoHeightMin: 0,
        autoHeightMax: 200
    };

    return (
        <Scrollbars {...scrollBarProps}>
            {menu}
        </Scrollbars>
    );
};

<Select menuRenderer={this.menuRenderer} />

[tomasztomys]

@primetwig a select not scroll to selected option on open menu list...

[primetwig]

@tomasztomys I believe u can take some parameters from params (like current active index) and pass it to the scrollBarProps, because it handles the scroll and related stuff from this point.

[kaiohon]

Is there a possibility to use SimpleBar for the custom scrollbars?

[AKosorukov]

The question is still relevant!

[DmitriyWebDev]

The question is really still relevant!

[manu1222]

The question is still relevant! But no solution, either kill me or kill IE.

[zzossig]

import Select from "react-select";
import Scrollbars from "react-custom-scrollbars";

const MyComponent = () => {
  const renderScrollbar = props => {
    return (
      <div style={{ height: 300 }}>
        <Scrollbars>{props.children}</Scrollbars>
      </div>
    );
  };

  return (
    <Select
       ....
       components={{ MenuList: renderScrollbar }}
    />
  );
}

something like this works for me.

[Grsmto]

@kaiohon yes you can use SimpleBar. Please have a look at that example: https://codesandbox.io/s/simplebar-reactselect-gwgpu

const renderScrollbar = props => {
  return (
    <ReactSimpleBar style={{ maxHeight: 300 }}>{props.children}</ReactSimpleBar>
  );
};

function App() {
  return (
      <Select
        ...
        components={{ MenuList: renderScrollbar }}
      />
  );
}

[Tomassito]

import Select from "react-select";
import Scrollbars from "react-custom-scrollbars";

const MyComponent = () => {
  const renderScrollbar = props => {
    return (
      <div style={{ height: 300 }}>
        <Scrollbars>{props.children}</Scrollbars>
      </div>
    );
  };

  return (
    <Select
       ....
       components={{ MenuList: renderScrollbar }}
    />
  );
}

something like this works for me.

@zzossig Can you share a codesanbox with this working? I copied this and didn't work for me. Also, no need to wrap it in additional div just to get the height, as you can set autoHeight and autoHeightMax on Scrollbars.
It only worked after adding prop captureMenuScroll={false}

[zzossig]

@Tomassito Here you are
codesandbox link

[MDSilviu]

@kaiohon yes you can use SimpleBar. Please have a look at that example: https://codesandbox.io/s/simplebar-reactselect-gwgpu

const renderScrollbar = props => {
  return (
    <ReactSimpleBar style={{ maxHeight: 300 }}>{props.children}</ReactSimpleBar>
  );
};

function App() {
  return (
      <Select
        ...
        components={{ MenuList: renderScrollbar }}
      />
  );
}

@Grsmto the scroll doesn't work with the version 3.05

[sandbox4013]

react-custom-scrollbars doesn't work start with react-select's versions 3.0.5. Tested on @Tomassito codesandbox with versions 3.0.5 - 3.0.8.
3.0.4 works fine for me

[giladToluna]

Hello.
Here you can find example for react-select using Simplebar + keyboard navigation + scroll to selected on menu open:
https://codesandbox.io/s/react-selectsimplebarkeboard-g6hfs

It's a bit hacky.., and also a bit flashy, but didn't find any better solution until now.
I used timeout because when the keyDown action is called, the focused option is the previous one..
( and we want to check the new one )

[taiwanhua]

you can just use styled-component to rewrite css, like below :

import Select from 'react-select'
import styled from 'styled-components'

const SelectExtend = styled(Select).attrs((props) => ({}))`
    && {
        [class*="MenuList"] {
            //滾動條美化
            ::-webkit-scrollbar {
                width: 0.5em;
                height: ${props => props?.theme?.scrollHeight ?? 'initial'}; //scroll-x 的高度
            }
            ::-webkit-scrollbar-track {
                -webkit-border-radius: 10px;
                border-radius: 10px;
                margin:0px 0.1rem 5px 0;
            }
            ::-webkit-scrollbar-thumb {
                -webkit-border-radius: 4px;
                border-radius: 4px;
                background: ${props => props?.theme?.scrollUnhoverBackgroundColor ?? '#9093994d'};
            }
            &:hover::-webkit-scrollbar-thumb {
                -webkit-border-radius: 4px;
                border-radius: 4px;
                background: ${props => props?.theme?.scrollHoverBackgroundColor ?? '#9093994d'};
            }
        }
    }
`