This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

react-mini-virtual-list

English | 中文说明

Whath is virtual 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.

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

install

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

old NPM name is: react-mini-virtrual-list, the name is changed;

example

import VirtualList from 'react-mini-virtual-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" style={item?.style} key={index}>
            Row #{item}
        </div>
      );
    };
    
    return (
        <>
            <VirtualList
                width="auto"
                // scrollToAlignment="start"
                // scrollToIndex={30}
                scrollOffset={500}
                height={400}
                limit={200}
                dataSource={dataSource}
                onItemsRendered={renderOn}
                itemSize={50}
                className="VirtualList"
            >
                {
                    dataSource?.map((item, index) => {
                        return renderItem(item, index);
                    })
                }
            </VirtualList>
        </>
    );
}

属性说明

name	type	defaultValue	description
estimatedItemSize	number	50	Estimated size of list elements (scroll direction)
width和height	number / string	-	The size of the visual area of the list (scroll direction)
limit	number	-	Maximum number of lazy loads
itemSize	number / array / function	-	Height (width) of list elements
onScroll	function	-	Scroll triggered function
onItemsRendered	function	-	The function that is triggered when new data is loaded, stopIndex is the start and end indexes of the render
overscanCount	number	3	Number of pre-loaded elements (three before and three after default)
dataSource	Array	-	Customize the data source for rendering
scrollOffset	number	-	Sets which location to scroll to
scrollToIndex	number	-	To set which data to scroll to, choose between scrollOffset
scrollToAlignment	string	start / center / end / auto	In combination with 'scrollToIndex', specify the location of the index entry in the visible area 'start' starting area 'center' middle area 'end' tail area 'auto' automatically displays the location of 'scrollToIndex'
scrollDirection	string	vertical / horizontal	Sets the scrolling direction of the list. Default is' vertical '

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!