Cool Virtual is a tiny React hook for rendering large datasets like a breeze.
Features:
- Renders millions of items with highly performant way, using DOM recycling.
- Easy to use, based on React hook.
- Apply styles without hassle, just few setups.
- Supports fixed, variable, dynamic, and real-time heights/widths.
- Supports responsive web design (RWD) for better UX.
- Supports sticky headers for building on-trend lists.
- Built-ins load more callback for you to deal with infinite scroll + skeleton screens.
- Imperative scroll-to methods for offset, items, and alignment.
- Out-of-the-box smooth scrolling and the effect is DIY-able.
- It’s possible to implement stick to bottom and pre-pending items for chat, feeds, etc.
- Provides isScrolling indicator to you for UI placeholders or performance optimization.
- Supports server-side rendering (SSR) for a fast FP + FCP and better SEO.
- Supports TypeScript type definition.
- Super flexible API design, built with DX in mind.
- Tiny size (~ 3kB gzipped). No external dependencies, aside for the react.
How to use it:
1. Install and import.
# Yarn $ yarn add react-cool-virtual # NPM $ npm i react-cool-virtual --save
import useVirtual from "react-cool-virtual";
2. Basic usage.
const List = () => {
const { outerRef, innerRef, items } = useVirtual({
itemCount: 10000,
itemSize: 50,
});
return (
<div
ref={outerRef} // Attach the `outerRef` to the scroll container
style={{ width: "300px", height: "500px", overflow: "auto" }}
>
{/* Attach the `innerRef` to the wrapper of the items */}
<div ref={innerRef}>
{items.map(({ index, size }) => (
// You can set the item's height with the `size` property
<div key={index} style={{ height: `${size}px` }}>
{index}
</div>
))}
</div>
</div>
);
};
3. Available options.
itemCount, ssrItemCount, itemSize = 50, horizontal, overscanCount = 1, useIsScrolling, stickyIndices, scrollDuration = (d) => Math.min(Math.max(d * 0.075, 100), 500), scrollEasingFunction = (t) => -(Math.cos(Math.PI * t) - 1) / 2, loadMoreCount = 15, isItemLoaded, loadMore, onScroll, onResize,
Preview:
Download Details:
Author: wellyshen
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/wellyshen/react-cool-virtual
License: MIT
