React Cool Virtual

A tiny React hook for rendering large datasets like a breeze.

README

React Cool Virtual

A tiny React hook for rendering large datasets like a breeze.

npm version npm downloads coverage status gzip size best of js All Contributors


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 (~ 3.1kB gzipped). No external dependencies, aside for thereact.

Why?


When rendering a large set of data (e.g. list, table, etc.) in React, we all face performance/memory troubles. There're some great libraries already available but most of them are component-based solutions that provide well-defineded way of using but increase a lot of bundle size. However, a library comes out as a hook-based solution that is flexible andheadless but using and styling it can be verbose (because it's a low-level hook). Furthermore, it lacks many of the useful features.

React Cool Virtual is a tiny React hook that gives you abetter DX and modern way for virtualizing a large amount of data without struggle 🤯.

Docs


  - CDN
- API
  - Options
  - [How to Share A ref?](#how-to-share-a-ref)

Getting Started


Requirement


To use React Cool Virtual, you must use react@16.8.0 or greater which includes hooks.

Installation


This package is distributed via npm.

  1. ```sh
  2. $ yarn add react-cool-virtual
  3. # or
  4. $ npm install --save react-cool-virtual
  5. ```

⚠️ This package using ResizeObserver API under the hook. Most modern browsers support it natively, you can also add polyfill for full browser support.


CDN


If you're not using a module bundler or package manager. We also provide a [UMD](https://github.com/umdjs/umd) build which is available over the [unpkg.com](https://unpkg.com) CDN. Simply use a `