Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-virtualized-select
Advanced tools
Changelog
3.1.3
cursor: pointer
style by defalut to select options.Readme
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/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:
<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>
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-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 (
<VirtualizedSelect
options={options}
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. |
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). |
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. |
FAQs
Drop-down menu for React with windowing to support large numbers of options.
The npm package react-virtualized-select receives a total of 21,775 weekly downloads. As such, react-virtualized-select popularity was classified as popular.
We found that react-virtualized-select demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.