react-select-virtualized

react-select-virtualized

react-select v5 + react-virtualized + react hooks!

This project came up after hours of trying to find an autocomplete component that supports large sets of data to be displayed and searched for while maintain performance. The only libraries out there that allow this functionality are either not maintained anymore, use outdated libraries or are poorly performant. I created a component that uses the Airbnb library called react-virtualized for the virtual data loading of elements and plugged it to the react-select (the most used autocomplete library for react) menu list.

Install

yarn add react-select-virtualized

Peer Dependencies

{
    "react",
    "react-dom",
    "react-virtualized",
    "react-select"
}

API Documentation

You can check the full library documentation here!!!!.

Examples

The select component will be the same from react-select v5 so you will be able to use it with any select you already have.

Check Storybook for more examples

const options = [
  {
    value: 1,
    label: `guiyep`,
  },
  ...
];

const opsGroup = [
  { label: `Group Name Header`, options },
  ...
]

Basic

import React from 'react';

import Select from 'react-select-virtualized';

const Example1 = () => <Select options={options} />;

With group

import React from 'react';

import Select from 'react-select-virtualized';

const Example1 = () => <Select options={opsGroup} grouped />;