Super simple component just throttle a list to reduce rendering cost of long list.
$ npm i react-list-throttle-component
or yarn add
import ListThrottle from 'react-list-throttle';
// ...
return (
<ListThrottle items={strs}>
{({renderPrevItems, renderNextItems, throttledItems}) => (
<SomeAwesomeComponentSupportsScroll
superHandlerCatchOnScrollTop={renderPrevItems}
superHandlerCatchOnScrollEnd={renderNextItems}
>
<ul>
{throttledItems.map(str => (
<li>{str></li>
))}
</ul>
</SomeAwesomeComponentSupportsScroll>
)}
</ListThrottle>
)
ListThrottle has no actual DOM but only functionality.
And also, there is no functionality supports handling onScroll
event. So if you would like to implement a component works like infinite scroller
you just need to implement the handler by yourself.
<ListThrottle items={items} contentsPerPage={contentsPerPage} previousPageBuffer={0}>
{({page, renderPrevItems, renderPage, renderNextItems, throttledItems}) => (
<>
{throttledItems.map(item => (
<ItemRow key={item.id}>{item}</ItemRow>
))}
<NavigationButton
page={page}
max={Math.ceil(sortedItems.length / contentsPerPage)}
onPrev={renderPrevItems}
onNext={renderNextItems}
onPaged={renderPage}
/>
</>
)}
</ListThrottle>
interface ChildArgument<T> {
// function to call previous page which is intented to use event handler for kinda `onScrollTop`
renderPrevItems(): void;
// function to call next page which is intented to use event handler for kinda `onScrollEnd`
renderNextItems(): void;
renderPage(page: number): void;
throttledItems: ReadonlyArray<T>;
}
interface Props<T> {
items: ReadonlyArray<T>;
previousPageBuffer?: number;
contentsPerPage?: number;
children(arg: ChildArgument<T>): ReactNode;
}
MIT