Drop-down menu for React with windowing to support large numbers of options.
!NPM version
!NPM license
!NPM total downloads
!NPM monthly downloads


!react-virtualized-select example
Install react-virtualized-select using npm.
``shell`
npm install react-virtualized-select --save
ES6, CommonJS, and UMD builds are available with each distribution.
For example:
`js
// 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/styles.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:
`html
`
_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:
`js
import React, { Component } from 'react'
import VirtualizedSelect from 'react-virtualized-select'
import 'react-select/dist/react-select.css'
import 'react-virtualized/styles.css'
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, disabled: true }
// And so on...
]
return (
onChange={(selectValue) => this.setState({ selectValue })}
value={this.state.selectValue}
/>
)
}
}
`
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. |PropTypes.number
| maxHeight | | Max height of options menu; defaults to 200 pixels. |PropTypes.number
| optionHeight | or PropTypes.func | Option height (defaults to 35 pixels). Dynamic height can be supported via a function with the signature ({ option: Object }): number |PropTypes.func
| optionRenderer | | Custom option renderer; (see below for signature). |PropTypes.func
| selectComponent | | 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). |
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. |number
| focusedOptionIndex | | Index of the currently-focused option. |Function
| focusOption | | Callback to update the focused option; for example, you may want to call this function on mouse-over. |string
| key | | A unique identifier for each element created by the renderer. |string
| labelKey | | Attribute of option that contains the display text. |Object
| option | | The option to be rendered. |Array
| options |