Skip to content
HOC that uses react-virtualized and react-select to display large lists of options in a drop-down
Branch: master
Clone or download
Latest commit aa47a7f Mar 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
source Added cursor:poitner default style to option Feb 2, 2018
.babelrc Removed unnecessary trasnform for Babel dev env Oct 11, 2016
.gitignore Ignored dist May 12, 2016
.npmignore Initial commit Apr 2, 2016
CHANGELOG.md 3.1.3 Feb 2, 2018
CONTRIBUTING.md Removed Gitter link Jun 23, 2017
LICENSE
README.md Minor fix on string #5 Mar 8, 2019
circle.yml Initial commit Apr 2, 2016
index.html Replace npmcdn.com with unpkg.com Aug 31, 2016
karma.conf.js Initial commit Apr 2, 2016
package.json Bumped min react-select version to 1.0.0 (dropping RCs) Apr 22, 2018
styles.css Add cursor:pointer style to .VirtualizedSelectOption Feb 2, 2018
webpack.config.demo.js Initial commit Apr 2, 2016
webpack.config.dev.js Changed port for local dev. Updated EXample to use .indexOf instead o… Jun 17, 2016
webpack.config.umd.js fixed #55 bug in UMD build Apr 25, 2017
yarn.lock Updated RV version used for demo site to 9.11.0 Oct 14, 2017

README.md

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

NPM version NPM license NPM total downloads NPM monthly downloads PayPal donate button Patreon donate button

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

react-virtualized-select example

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:

Property Type Description
async PropTypes.bool Use Select.Async internally; if this property is specified then a loadOptions method should also be used.
maxHeight PropTypes.number Max height of options menu; defaults to 200 pixels.
optionHeight PropTypes.number or PropTypes.func Option height (defaults to 35 pixels). Dynamic height can be supported via a function with the signature ({ option: Object }): number
optionRenderer PropTypes.func Custom option renderer; (see below for signature).
selectComponent PropTypes.func Use a specific select HOC (eg Select, Select.Creatable, Select.Async or Select.AsyncCreatable); defaults to Select (or Select.Async if async flag is true).

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:

Property Type Description
focusedOption Object The option currently-focused in the dropdown. Use this property to determine if your rendered option should be highlighted or styled differently.
focusedOptionIndex number Index of the currently-focused option.
focusOption Function Callback to update the focused option; for example, you may want to call this function on mouse-over.
key string A unique identifier for each element created by the renderer.
labelKey string Attribute of option that contains the display text.
option Object The option to be rendered.
options Array<Object> Array of options (objects) contained in the select menu.
selectValue Function Callback to update the selected values; for example, you may want to call this function on click.
style Object Styles that must be passed to the rendered option. These styles are specifying the position of each option (required for correct option displaying in the dropdown).
valueArray Array<Object> Array of the currently-selected options. Use this property to determine if your rendered option should be highlighted or styled differently.
valueKey string Attribute of option that contains the value.

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>
  );
}
You can’t perform that action at this time.