React Cool Virtual
A tiny React hook for rendering large datasets like a breeze.
README
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 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 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
- Examples
- API
- Options
- Others
- [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.
- ```sh
- $ yarn add react-cool-virtual
- # or
- $ npm install --save react-cool-virtual
- ```
⚠️ This package using ResizeObserver API under the hook. Most modern browsers support it natively, you can also add polyfill for full browser support.