bvaughn/react-virtualized-select

This component is no longer supported

Hello! This package is built on react-virtualized (a library that I no longer support) and vesion 1.0 of react-select (which is no longer the current version). As such, I've decided to stop supporting this package. GitHub issues and pull requests may be ignored.

If you are interested in taking over maintenance of this package, please send me an email (see my GitHub profile) and I'd be happy to add you as a collaborator.

React Virtualized Select

Demos available here: http://bvaughn.github.io/react-virtualized-select/

Getting started

Install react-virtualized-select using npm.

npm install react-virtualized-select --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

// Make sure to import default styles.
// This only needs to be done once; probably during bootstrapping process.
import 'react-select/dist/react-select.css'
import 'react-virtualized-select/styles.css'

// Then import the virtualized Select HOC
import VirtualizedSelect from 'react-virtualized-select'

Alternately you can load a global-friendly UMD build:

<link rel="stylesheet" href="path-to-react-select/dist/react-select.css">
<link rel="stylesheet" href="path-to-react-virtualized/styles.css">
<link rel="stylesheet" href="path-to-react-virtualized-select/styles.css">

<script src="path-to-react-virtualized-select/dist/umd/react-virtualized-select.js"></script>

Example

react-select-virtualized works just like react-select. You pass it an array of options, along with almost any other parameters supported by the Select component.

Try this example in Code Sandbox.

// Import default styles.
// This only needs to be done once; probably during bootstrapping process.
import "react-select/dist/react-select.css";
import "react-virtualized-select/styles.css";

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-virtualized-select";

// Dummy array of test values.
const options = Array.from(new Array(1000), (_, index) => ({
  label: `Item ${index}`,
  value: index
}));

ReactDOM.render(
  <Select options={options} />,
  document.getElementById("root")
);

React Virtualized Select Props

The additional parameters introduced by react-select-virtualized are optional. They are:

Unsupported props

optionComponent is not supported for react-select-virtualized; optionRenderer must be used instead, see below for usage.

Custom Option Renderer

You can override the built-in option renderer by specifying your own optionRenderer property. Your renderer should return a React element that represents the specified option. It will be passed the following named parameters:

optionRenderer example

It should be noted that in order to successfully set the active index in your custom renderer, you need to call the selectValue prop. A common pattern is to bind onto your onClick handler in your custom element. The example that follows also provides the required style prop (as noted above), which is necessary to properly position the element. Refer to the full example for the complete usage.

function Option({
  style,
  option,
  selectValue,
}) {
  return (
    <a
      style={style}
      onClick={() => selectValue(option)}
    >
      {option.value}
    </a>
  );
}