Search code examples
react-selectreact-virtualized

I need react multi-select with virtualized list options

I have a multi-select component with a lot of option data that takes a long time to load.

I optimized it with the react-select-virtualized and it works ok but it doesn't support multi-selection yet.

enter image description hereTaken from: (https://github.com/guiyep/react-select-virtualized#what-we-do-support-and-dont-from-react-select)

I want a virtualized-selectbox with multiple value select options.

Solution

  • Check the below stackblitz app. It's very helpful for my requirement.

    https://stackblitz.com/edit/react-select-v2-virtualized

    In this app, They create a react-select component with react-virtualized.

    Example codes:

    const MenuList = props => {
  const rows = props.children;
  const rowRenderer = ({ key, index, isScrolling, isVisible, style }) => (
    <div key={key} style={style}>{rows[index]}</div>
  );

  return (
    <List
      style={{ width: '100%' }}
      width={300}
      height={300}
      rowHeight={30}
      rowCount={rows.length}
      rowRenderer={rowRenderer}
    />
  )
}

    Inside render function

    <Select
   components={{ MenuList }}
   defaultValue={this.state.options[10]}
   options={this.state.options}
 />