Всем здравствуйте. Делаю список с использованием react-select, столкнулся с трудностью, что для большого списка нужна динамическая отрисовка. Начал изучать react-window, понять ее не смог. Далее наткнулся на библиотеку react-windowed-select, в которой говорится о том, что в нее добавлен react-window. Подскажите, пользовался ли кто то ей? И можно ли в ней сделать отрисовку только определенного количества элементов из большого списка и если можно то как?
import s from './SelectComponent.module.sass'
import {useState} from "react";
import WindowedSelect from "react-windowed-select";
import { WindowedMenuList } from 'react-windowed-select';
const SelectComponent = () => {
const options = [
{
value: 'Karolina',
label: 'karolina'
},
{
value: 'Dima',
label: 'dima'
},
{
value: 'Andrew',
label: 'andrew'
},
{
value: 'Wolf',
label: 'wolf'
},
{
value: 'Karolina',
label: 'karolina'
},
{
value: 'Dima',
label: 'dima'
},
{
value: 'Andrew',
label: 'andrew'
},
{
value: 'Wolf',
label: 'wolf'
},
{
value: 'Karolina',
label: 'karolina'
},
{
value: 'Dima',
label: 'dima'
},
{
value: 'Andrew',
label: 'andrew'
},
{
value: 'Wolf',
label: 'wolf'
},
{
value: 'Karolina',
label: 'karolina'
},
{
value: 'Dima',
label: 'dima'
},
]
const massiv =[]
for (let i = 0; i < 5000; i += 1) {
massiv.push({
label: `Option ${i}`,
value: i
});
}
const [creator, setCreator]= useState('wolf')
const getValue = () => {
return creator ? options.find(c=> c.value === creator) : ''
}
const onChange = (newValue) =>{
setCreator(newValue.label)
}
console.log(creator)
return (
<WindowedSelect
components={{ MenuList: WindowedMenuList }}
windowThreshold={10}
isClearable={true}
onChange={onChange}
value={getValue()}
options={massiv}
className='custom_select'
classNamePrefix='custom_select'
placeholder={'Создатель'}
/>
)
}
export default SelectComponent
