react-freeze-v12n

Simple virtualization library with react-freeze and intersection observer.

Motivation

One use case for virtualization is rendering components just inside the window.

Virtualization libraries such as react-window or react-virtualized can do this, but they require a lot of complexity for what you want to do.

React Freeze freezes the rendering the components instead of unmounting. This library combines this approach and intersection observer to virtualize the components.

Usage

You just wrap components.

import React from "react";
import { Virtualization } from "react-virtualization-v12n"

const Component = () => {
  return <Virtualization><SomeItem></Virtualization>;
}

You also can set intersection observer options.

const Component = () => {
  return (
    <Virtualization intersectionOptions={{
      /* Optional options */
      threshold: 0,
    }}>
      <SomeItem>
    </Virtualization>
  );
};