React-lzloader

Lazy-Load your components with using Intersection Observer API

Installation

npm install --save react-lzloader

or

yarn add react-lzloader

Usage

import LazyLoad from "react-lzloader";

const App = () => (
  <LazyLoad callback={yourCallbackFunc}>
    {
      (setRef) => (
        <div ref={setRef} />;
      )
    }
  </LazyLoad>
);

This libraries component (LazyLoad) called yourCallbackFunc when the setted up component is in Window.

So you write some actions or functions in callback and set refs in child components of LazyLoad.

Option

interface IntersectionObserverInit {
    root?: Element | null;
    rootMargin?: string;
    threshold?: number | number[];
}

const options: IntersectionObserverInit = {
  root: null,
  rootMargin: '0px',
  threshold: 1.0
}
<LazyLoad callback={yourCallbackFunc} options={options} />

If you want to set more detail intersection options, those intersection observer options to prop the LazyLoad component.

The options are Intersection Observer Options.

Examples

Lazy image load

// TODO

Infinite scroll

// TODO