Package Exports

react-select-virtualized
react-select-virtualized/dist/index.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-select-virtualized) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Alt Text

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 />;