Как пользоваться react-windowed-select?

Question

[LI4NOOST]

Всем здравствуйте. Делаю список с использованием 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

Comments

[chemdev]

Да, можно. Отобразить часть массива - это основы программирования. Если данных очень много лучше сделать autocomplete input, обычно это дело еще и взаимодействует с апи.

[LI4NOOST]

chemdev, Спасибо