: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.

✏️ className

Type: String

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

✏️ style

Type: CSSProperties

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

✏️ freezeOnceVisible

Type Boolean

A Boolean to execute when the content appears on the screen.

🔥 Building LazyLoad

pnpm build

🌈 Running examples

cd example
pnpm dev

📄 License

Back To The Top