# react-virtualized-select
> Drop-down menu for React with windowing to support large numbers of options.
Latest version **3.1.3** (published 2018-02-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-virtualized-select
pnpm add react-virtualized-select
yarn add react-virtualized-select
bun add react-virtualized-select
```
## Health
**Score 23/100 (F)** — status: abandoned.
Positive: has types package; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.1.3 |
| Published | 2018-02-02 |
| First published | 2016-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-virtualized-select) |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1170 |
| Author | Brian Vaughn |
| Maintainers | brianvaughn |
## Links
- npm: https://www.npmjs.com/package/react-virtualized-select
- Repository: https://github.com/bvaughn/react-virtualized-select
- Issues: https://github.com/bvaughn/react-virtualized-select/issues
- npm.io page: https://npm.io/package/react-virtualized-select
## Dependencies (4)
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [react-select](https://npm.io/package/react-select.md) ^1.0.0-rc.2
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.11.6
- [react-virtualized](https://npm.io/package/react-virtualized.md) ^9.0.0
## Recent versions
- 3.1.3 (latest) — 2018-02-02
- 3.0.0 (next) — 2017-04-26
- 3.1.2 — 2018-02-02
- 3.1.1 — 2018-01-14
- 3.1.0 — 2017-07-06
- 3.0.1 — 2017-04-27
- 2.4.2 — 2017-04-26
- 2.4.1 — 2017-04-25
- 2.4.0 — 2017-03-08
- 2.3.0 — 2017-01-28
- 2.2.0 — 2017-01-15
- 2.1.1 — 2016-11-18
- 2.1.0 — 2016-10-21
- 2.0.2 — 2016-10-13
- 2.0.1 — 2016-10-11
- … 12 more at https://npm.io/package/react-virtualized-select/versions
## README
# React Virtualized Select
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5CVMYQKVPZC72)
[](https://www.patreon.com/user?u=2979769)
### Demos available here: http://bvaughn.github.io/react-virtualized-select/
## Getting started
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
```
## 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](https://github.com/JedWatson/react-select/#usage). 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 (
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 |
|:---|:---|:---|
| async | `PropTypes.bool` | Use `Select.Async` internally; if this property is specified then a [`loadOptions`](https://github.com/JedWatson/react-select#async-options-with-promises) 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). |
## 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