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-windowed-select
Advanced tools
![example workflow](https://github.com/jacobworrel/react-windowed-select/actions/workflows/node.js.yml/badge.svg) [![npm package][npm-badge]][npm] [![Coverage Status](https://coveralls.io/repos/github/jacobworrel/react-windowed-select/badge.svg?branch=mas
Readme
An integration of react-window
with react-select
to efficiently render large lists.
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:
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 <WindowedSelect options={options} />;
}
For more examples, check out the Storybook.
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
.
The number of options beyond which the menu will be windowed.
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.
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) => <components.ClearIndicator {...props}>clear</components.ClearIndicator>
};
function App () {
return (
<WindowedSelect
components={customComponents}
isClearable={true}
filterOption={customFilter}
options={options}
/>
);
}
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
:
import { WindowedMenuList } from 'react-windowed-select';
import CreatableSelect from 'react-select/creatable';
function App () {
return (
<CreatableSelect
components={{ MenuList: WindowedMenuList }}
// ...other props
/>
);
}
You can still use the styles API 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.
<WindowedSelect
options={options}
styles={{
option: (base) => ({
...base,
height: 60, // must be type number
padding: '20px 12px',
}),
}}
/>
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
FAQs
![example workflow](https://github.com/jacobworrel/react-windowed-select/actions/workflows/node.js.yml/badge.svg) [![npm package][npm-badge]][npm] [![Coverage Status](https://coveralls.io/repos/github/jacobworrel/react-windowed-select/badge.svg?branch=mas
The npm package react-windowed-select receives a total of 15,959 weekly downloads. As such, react-windowed-select popularity was classified as popular.
We found that react-windowed-select demonstrated a healthy version release cadence and project activity because the last version was released less than 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.