Lazy Load Components Package

This package helps you load components with IntersectionObserver.

| Statements | Branches | Functions | Lines | | --------------------------------------------------------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | | | | |

Installation

yarn install @trendyol/component-lazy-loader

Usage

Example:

import React from "react";
import LazyComponent from "@trendyol/component-lazy-loader";

function App() {
  let length = 100,
    i = 0,
    arr = Array(length);

  while (i < length) arr[i++] = i;
  return (
    <div>
      {arr.map((element, index) => {
        return (
          <LazyComponent
            placeholder={
              <div
                key={index}
                style={{
                  height: 100,
                  backgroundColor: "red",
                  marginBottom: 10,
                }}
              >
                Placeholder
              </div>
            }
            ratio={0.1}
          >
            <div
              key={index}
              style={{
                height: 100,
                backgroundColor: "lightblue",
                marginBottom: 10,
              }}
            >
              Test Component
            </div>
          </LazyComponent>
        );
      })}
    </div>
  );
}

Options

export interface LazyLoadComponentsProps {
  placeholder: React.Component;
  children: React.Component;
  force?: boolean; // default false
  ratio?: number; // default 0.1
  onVisible?: Function;
}