# react-windowed-select
>  [![npm package][npm-badge]][npm] [ · MIT license · 0 weekly downloads
## Install
```sh
npm install react-windowed-select
pnpm add react-windowed-select
yarn add react-windowed-select
bun add react-windowed-select
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 5.2.0 |
| Published | 2024-01-28 |
| First published | 2018-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jacobworrel |
## Links
- npm: https://www.npmjs.com/package/react-windowed-select
- npm.io page: https://npm.io/package/react-windowed-select
## Dependencies (2)
- [react-select](https://npm.io/package/react-select.md) ^5.2.2
- [react-window](https://npm.io/package/react-window.md) ^1.8.6
## Recent versions
- 5.2.0 (latest) — 2024-01-28
- 4.0.0 (ie11-support) — 2022-06-04
- 2.0.3-beta.3 (beta) — 2020-05-27
- 5.1.1 — 2023-10-27
- 5.1.0 — 2022-08-27
- 5.0.0 — 2022-05-14
- 3.1.2 — 2021-07-02
- 3.1.1 — 2021-05-02
- 3.1.1-next.0 — 2021-05-02
- 3.0.0 — 2021-01-23
- 2.0.5 — 2021-01-03
- 2.0.4 — 2020-11-02
- 2.0.3 — 2020-06-20
- 2.0.3-beta.2 — 2020-05-27
- 2.0.3-beta.1 — 2020-05-27
- … 11 more at https://npm.io/package/react-windowed-select/versions
## README
# react-windowed-select
[![npm package][npm-badge]][npm]
[](https://coveralls.io/github/jacobworrel/react-windowed-select?branch=master)
[![Storybook][storybook-badge]][storybook]
An integration of `react-window` with `react-select` to efficiently render large lists.
## Installation and Usage
The easiest way to use `react-windowed-select` is to install it from npm:
```
npm install react-windowed-select
```
Then use it in your app:
```javascript
import React from "react";
import WindowedSelect from "react-windowed-select";
const options = [];
for (let i = 0; i < 10000; i += 1) {
options.push({
label: `Option ${i}`,
value: i
});
}
function App () {
return ;
}
```
[](https://codesandbox.io/s/n592j4l13m)
For more examples, check out the [Storybook][storybook].
## Props
`react-windowed-select` is just a wrapper around `react-select`.
All props passed to the `WindowedSelect` component are forwarded to the default exported `Select` component
from `react-select`.
### windowThreshold | default = 100
The number of options beyond which the menu will be windowed.
## Named Exports
All of the named exports from `react-select` are re-exported from `react-windowed-select` for easy access to features
that allow you to customize your Select component.
```javascript
import { components, createFilter } from 'react-windowed-select';
import React from "react";
const options = [
{ value: 1, label: 'Foo' },
{ value: 2, label: 'Bar '},
];
const customFilter = createFilter({ ignoreAccents: false });
const customComponents = {
ClearIndicator: (props) => clear
};
function App () {
return (
);
}
```
[](https://codesandbox.io/s/sweet-snowflake-evjeo?fontsize=14)
### WindowedMenuList
By default, `react-windowed-select` wraps the standard Select component from `react-select`.
If you want to add windowing to the Async or Creatable Select components from `react-select`, use the `WindowedMenuList`:
```javascript
import { WindowedMenuList } from 'react-windowed-select';
import CreatableSelect from 'react-select/creatable';
function App () {
return (
);
}
```
## Custom Styles
You can still use the [styles API](https://www.react-select.com/styles) from `react-select` to customize how your Select component looks.
The height property of the `Option`, `GroupHeading`, `NoOptionsMessage` and/or `LoadingMessage` components is used to determine the total height of the windowed menu and the following defaults are provided:
|Component |Default Height|
|------------------|--------------|
|`Option` |35px |
|`GroupHeading` |25px |
|`NoOptionsMessage`|35px |
|`LoadingMessage` |35px |
To override these values, use the `styles` prop like you would with a regular `react-select` component.
```javascript
({
...base,
height: 60, // must be type number
padding: '20px 12px',
}),
}}
/>
```
## Grouped Options
Grouped options are not fully supported.
In order to ensure proper scrolling and focus behavior, options nested inside the `Group` component are flattened. This changes the component structure within `MenuList` in the following way:
```
MenuList
│
└───Group
│ │
| └───GroupHeading
|
└───Option 1
|
└───Option 2
```
[build-badge]: https://img.shields.io/travis/jacobworrel/react-windowed-select/master.png?style=flat-square
[build]: https://travis-ci.org/jacobworrel/react-windowed-select
[npm-badge]: https://img.shields.io/npm/v/react-windowed-select.png?style=flat-square
[npm]: https://www.npmjs.com/package/react-windowed-select
[coveralls-badge]: https://img.shields.io/coveralls/jacobworrel/react-windowed-select/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/jacobworrel/react-windowed-select
[storybook-badge]: https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg
[storybook]: https://peaceful-leavitt-38971b.netlify.com
---
_Source: https://npm.io/package/react-windowed-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._