react-mini-virtrual-list v2.0.0

react-mini-virtrual-list

English | 中文说明

Whath is virtrual list And how to use?

Used when loading a large amount of data at once, the theory is to calculate the index items to render based on the set size before rendering the data, and then render the list in the visual area, outside of which it will not be rendered.

why choose it

If you're looking for a component that simply renders list data, this might be a good choice, as it provides an easy and convenient API and flexible control over the rendering of lists.

• supports rendering within visual areas, while rendering outside visual areas will be unloaded
• supports custom rendering dataSources
• supports lists of horizontal and vertical scrolling directions
• Custom preload margin and load location or index

install

npm install --save react-mini-virtrual-list
# or
yarn add react-mini-virtrual-list

example

import VirtrualList from 'react-mini-virtrual-list';

// for example
const Home = () => {

    const [dataSource, setDataSource] = useState([...new Array(100).keys()]);

    const renderOn = (startIndex, stopIndex) => {
        // console.log(startIndex, stopIndex);
    };

    const renderItem = (item: any, index: number) => {
      return (
        <div className="Row" key={index}>
            Row #{item}
        </div>
      );
    };
    
    return (
        <>
            <VirtrualList
                width="auto"
                // scrollToAlignment="start"
                // scrollToIndex={30}
                scrollOffset={500}
                height={400}
                limit={200}
                dataSource={dataSource}
                renderItem={renderItem}
                onItemsRendered={renderOn}
                itemSize={50}
                className="VirtualList"
            />
        </>
    );
}

属性说明

Contribute

Thanks to the inspiration from React -virtualized and React -tiny- Virtrual list, you can go to support if you want to have more and more complex features!