Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
react-select-virtualized
Advanced tools
Select virtualized component using: react-select v4 + react-virtualized + react hooks
react-select v5 + react-virtualized + react hooks!
This project came up after hours of trying to find an autocomplete component that supports large sets of data to be displayed and searched for while maintain performance. The only libraries out there that allow this functionality are either not maintained anymore, use outdated libraries or are poorly performant.
I created a component that uses the Airbnb library called react-virtualized
for the virtual data loading of elements and plugged it to the react-select
(the most used autocomplete library for react) menu list.
npm install --save react-select-virtualized
{
"react",
"react-dom",
"react-virtualized",
"react-select"
}
The select component will be the same from react-select v5
so you will be able to use it with any select you already have.
Check Storybook for more examples
Components: Select
, Async
, Creatable
We support all the UI related props for the input. Extension also.
We do not support any related prop to the popup list. We extend it. *Sorry no extension of any component inside the list.*
Sorry no multi selection yet. (no isMulti
)
const options = [
{
value: 1,
label: `guiyep`,
},
...
];
const opsGroup = [
{ label: `Group Name Header`, options },
...
]
import React from 'react';
import Select from 'react-select-virtualized';
const Example1 = () => <Select options={options} />;
import React from 'react';
import Select from 'react-select-virtualized';
const Example1 = () => <Select options={opsGroup} grouped />;
import React from 'react';
import { Async } from 'react-select-virtualized';
const loadOptions = (input, callback) => {...};
const Example1 = () => <Async loadOptions={loadOptions}/>
const Example2 = () => <Async defaultOptions={options} loadOptions={loadOptions}/>
const Example3 = () => <Async defaultOptions={opsGroup} loadOptions={loadOptions} grouped/>
import React from 'react';
import { Creatable } from 'react-select-virtualized';
const Example1 = () => <Creatable options={options} />;
NOT YET DONE.
For custom styling of the Input component read the react-select
documentation.
The styling in the menu list is by css.
Set the menuIsOpen
prop to true, create an options list with less than 100 elements and use css for adjusting your css.
Use this example as a guidance
react-select-virtualized
grouped-virtualized-list-item
flat-virtualized-item
fast-option
fast-option
fast-option-focused
fast-option-selected
fast-option-create
Props | Type | Default | Description |
---|---|---|---|
grouped | boolean | false | Specify if options are grouped |
formatGroupHeaderLabel | function({ label, options}) => component | Will render a custom component in the popup grouped header (only for grouped) | |
formatOptionLabel (coming from react-select) | function(option, { context }) => component | Will render a custom component in the label | |
optionHeight | number | 31 | Height of each option |
groupHeaderHeight | number | Header row height in the popover list | |
maxHeight (coming from react-select) | number | auto | Max height popover list |
defaultValue | option | Will set default value and set the component as an uncontrolled component | |
value | option | Will set the value and the component will be a controlled component | |
onCreateOption (Only for Creatable) | function(option) => nothing | Will be executed when a new option is created , it is only for controlled components |
fast-react-select
.
-- v 1.0.0 --
-- v 1.1.0 --
-- v 1.2.0 --
-- v 2.0.0 --
-- v 2.1.0 --
-- v 2.2.0 --
-- v 2.3.0 --
-- v3.0.0 --
-- v 3.1.0 --
This is a React form state management library that works with React/Redux/React-Native.
MIT © guiyep
FAQs
Select virtualized component using: react-select v4 + react-virtualized + react hooks
The npm package react-select-virtualized receives a total of 0 weekly downloads. As such, react-select-virtualized popularity was classified as not popular.
We found that react-select-virtualized demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.