VirtualizedSelect.js

import Select from 'react-select'
import { List } from 'react-virtualized'
import React, { useState, Component } from 'react'
import { filter } from 'lodash/fp'

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={500}
      height={300}
      rowHeight={40}
      rowCount={rows.length}
      rowRenderer={rowRenderer}
    />
  )
}

const VirtualizedSelect = ({ allOpts, maxDisplayed, onChange }) => {
  const [inputValue, setInputValue] = useState('')
  const [displayedOpts, setDisplayedOpts] = useState(
    allOpts.slice(0, maxDisplayed)
  )
  const handleInputChange = inputValue => {
    if (inputValue === '') {
      return
    }
    const displayedOpts = filter(
      ({ label }) => label.toLowerCase().includes(inputValue.toLowerCase()),
      allOpts
    ).slice(0, maxDisplayed)
    setInputValue(inputValue)
    setDisplayedOpts(displayedOpts)
  }
  return (
    <div style={{ width: '500px' }}>
      <Select
        components={{ MenuList }}
        options={displayedOpts}
        onInputChange={handleInputChange}
        onChange={onChange}
      />
    </div>
  )
}

export default VirtualizedSelect