Skip to content

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

Notifications You must be signed in to change notification settings

jsdeveloperr/react-lazy-loader-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

19 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


logo

πŸ”₯ React Lazy Loader Component πŸ”₯

npm npm bundle size npm GitHub license

πŸ“š Introduction

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

πŸš€ Example

Check our πŸ‘‰ example

πŸ“¦ 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

πŸš€ Example 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

🍁 MIT Licensed | Copyright © 2022-present Abdulnasır Olcan and @ReactLazyLoadComponent contributors

Back To The Top