JSFiddle - React, Tailwind, and code Playground

by nehamahajan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/5.7.5/react-select.cjs.js"></script>
<div id="root"></div>

JavaScript

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import { FixedSizeList as List } from "react-window";


const options = [];
for (let i = 0; i < 50; i = i + 1) {
  options.push({ value: i, label: `Option ${i}` });
}

const height = 35;

class MenuList extends Component {
  render() {
    const { options, children, maxHeight, getValue } = this.props;
    const [value] = getValue();
    const initialOffset = options.indexOf(value) * height;

    return (
      <List
        height={maxHeight}
        itemCount={children.length}
        itemSize={height}
        initialScrollOffset={initialOffset}
      >
        {({ index, style }) => <div style={style}>{children[index]}</div>}
      </List>
    );
  }
}

const App = () => <Select components={{ MenuList }} options={options} />;

ReactDOM.render(<App />, document.getElementById("root"));