react-select + react-window

index.jsx

import CreatableSelect from "react-select/creatable";
import { FixedSizeList as List } from "react-window";

const Home = () => {
    // Generate 10,000 random string options
    const options = Array.from({ length: 10000 }, (_, i) => ({
        value: Math.random().toString(36).substring(2, 10) + i,
        label: Math.random().toString(36).substring(2, 10) + i,
    }));

    // Virtualized MenuList for react-select
    const MenuList = (props) => {
        const { options, children, maxHeight, getValue } = props;
        const height = Math.min(maxHeight, options.length * 35);

        // Find the currently selected value index for initial scroll
        const [value] = getValue();
        const initialOffset = value
            ? options.findIndex(option => option.value === value.value) * 35
            : 0;

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

    return (
        <div>
            <h1>Welcome to the Home Page</h1>
            <CreatableSelect
                isMulti
                closeMenuOnSelect={false}
                options={options}
                components={{ MenuList }}
            />
        </div>
    );
};

export default Home;