React Hook For Rendering Large Datasets – Cool Virtual

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:

React Hook For Rendering Large Datasets - Cool Virtual

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

You Might Be Interested In:

Tags:

Add Comment