React Virtualized Select
http://bvaughn.github.io/react-virtualized-select/
Demos available here:Getting started
Install react-virtualized-select
using npm.
npm install react-virtualized-
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. // Then import the virtualized Select HOC
Alternately you can load a global-friendly UMD build:
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:
{ superprops thisstate = {} } { const options = label: "One" value: 1 label: "Two" value: 2 label: "Three" value: 3 disabled: true // And so on... return <VirtualizedSelect options=options onChange= this value=thisstateselectValue /> }
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). |
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. |
style | PropTypes.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 | 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. |
valueKey | PropTypes.string |
Attribute of option that contains the value. |