@juanlatorre/react-select-virtualized NPM

react-select-virtualized

react-select v4 + 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

npm install --save react-select-virtualized

Peer Dependencies

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

Note

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

For using this package with react-select 3.x, please use version 2.5.11.

Try It!!!

Check Storybook for more examples

What we do support and don't from react-select

Components: Select, Async, Creatable

We support all the UI related props for the input. Extension also.
We do not support any related prop to the popup list. We extend it. *Sorry no extension of any component inside the list.*
Sorry no multi selection yet. (no isMulti)

Examples

Options Shape

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

Usage Async

import React from 'react';

import { Async } from 'react-select-virtualized';

const loadOptions = (input, callback) => {...};

const Example1 = () => <Async loadOptions={loadOptions}/>

const Example2 = () => <Async defaultOptions={options} loadOptions={loadOptions}/>

const Example3 = () => <Async defaultOptions={opsGroup} loadOptions={loadOptions} grouped/>

Async - No Group

Async - Grouped

Usage with creatable

import React from 'react';

import { Creatable } from 'react-select-virtualized';

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

Usage with creatable and group

NOT YET DONE.

Custom Styles

For custom styling of the Input component read the react-select documentation.

The styling in the menu list is by css.

How to leave the menu open so I can style my menu?

Set the menuIsOpen prop to true, create an options list with less than 100 elements and use css for adjusting your css.

Use this example as a guidance

react-select-virtualized grouped-virtualized-list-item flat-virtualized-item fast-option fast-option fast-option-focused fast-option-selected fast-option-create

Documentation - this are special to this library and none is required

Props	Type	Default	Description
grouped	boolean	false	Specify if options are grouped
formatGroupHeaderLabel	function({ label, options}) => component		Will render a custom component in the popup grouped header (only for grouped)
formatOptionLabel (coming from react-select)	function(option, { context }) => component		Will render a custom component in the label
optionHeight	number	31	Height of each option
groupHeaderHeight	number		Header row height in the popover list
maxHeight (coming from react-select)	number	auto	Max height popover list
defaultValue	option		Will set default value and set the component as an uncontrolled component
value	option		Will set the value and the component will be a controlled component
onCreateOption (Only for Creatable)	function(option) => nothing		Will be executed when a new option is created , it is only for controlled components