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 your application's bootstrapping process.
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-virtualized-select/styles.css">
<script src="path-to-react-virtualized-select/dist/umd/react-virtualized-select.js"></script>

Simple Example

react-select-virtualized works just like react-select. You pass it an array of options, along with any other parameters supported by the Select component. Here's a simple example:

import React, { Component } from 'react'
import VirtualizedSelect from 'react-virtualized-select'
import 'react-virtualized-select/styles.css'

class MySelect extends Component {
  constructor (props) {
    super(props)

    this.state = {}
  }

  render () {
    const options = [
      { label: "One", value: 1 },
      { label: "Two", value: 2 },
      { label: "Three", value: 3 }
      // And so on...
    ]

    return (
      <VirtualizedSelect
        options={options}
        onChange={(selectValue) => this.setState({ selectValue })}
        value={this.state.selectValue}
      />
    )
  }
}

React Virtualized Select Props

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

Property	Type	Description
maxHeight	`PropTypes.number`	Max height of options menu; defaults to 200 pixels.
optionHeight	`PropTypes.number`	Option height; defaults to 35 pixels.
optionRenderer	`PropTypes.func`	Custom option renderer; (see below for signature).

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	`PropTypes.object`	The option currently-focused in the dropdown. Use this property to determine if your rendered option should be highlighted or styled differently.
focusedOptionIndex	`PropTypes.number`	Index of the currently-focused option.
focusOption	`PropTypes.func`	Callback to update the focused option; for example, you may want to call this function on mouse-over.
labelKey	`PropTypes.string`	Attribute of option that contains the display text.
option	`PropTypes.object`	The option to be rendered.
options	`PropTypes.arrayOf(PropTypes.object)`	Array of options (objects) contained in the select menu.
selectValue	`PropTypes.func`	Callback to update the selected values; for example, you may want to call this function on click.
valueArray	`PropTypes.arrayOf(PropTypes.object)`	Array of the currently-selected options. Use this property to determine if your rendered option should be highlighted or styled differently.

emilebres / react-virtualized-select