React-lazy-loader-component NPM

:books: Introduction

Fast 1.15KB, Gzip 0.63KB, React Component to lazy load and other components/elements and use the Intersection Observer API.

:rocket: Example

Check our 👉 example

:package: Installation

# install with npm
npm install react-lazy-loader-component
# install with yarn
yarn add react-lazy-loader-component
# install with pnpm
pnpm add react-lazy-loader-component

:rocket: Example Repo

In Repo

📦 Examples

🗂 Basic Usage

import React from "react";
import { LazyLoad } from "react-lazy-loader-component";

const MyComponent = () => (
  <LazyLoad>
    <img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
  </LazyLoad>
);

🗂 Loading the image 100px prior to scroll

import { LazyLoad } from "react-lazy-loader-component";

const MyComponent = () => (
  <LazyLoad rootMargin={100}>
    <img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
  </LazyLoad>
);

🗂 Loading image only when 15% of it is in the viewport.

import { LazyLoad } from "react-lazy-loader-component";

const MyComponent = () => (
  <LazyLoad rootMargin={100} threshold={0.95}>
    <img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
  </LazyLoad>
);

🗂 Performing a side effect once your image is loaded

import { LazyLoad } from "react-lazy-loader-component";

const MyComponent = () => (
  <LazyLoad rootMargin={400} threshold={0.95} freezeOnceVisible={true}>
    <img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
  </LazyLoad>
);

🗂 Suspense and Lazy import

import React, { Suspense } from "react";
import { LazyLoad } from "react-lazy-loader-component";

const MyComponent = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyLoad rootMargin={100}>
      <img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    </LazyLoad>
  </Suspense>
);

🎉 Props

✏️ tag

Type: ComponentType | keyof JSX.IntrinsicElements Default: div

The tag option allows you to set the html element's tag even when it has no content.

✏️ rootMargin

Type: String Default: 0%

The rootMargin option allows you to specify how far below, above, to the left, and to the right of the viewport you want to begin displaying your content. If you specify 0, your content will be displayed as soon as it is visible in the viewport, if you want to load 100px below or above the viewport, use 100.

✏️ threshold

Type: number | number[] Default: 0

This threshold option allows you to specify how much of the element must be shown on the screen prior to loading. This requires a width and height to be set on the <LazyLoad> component in order for the browser to calcualte the viewable area.