jsdeveloperr/react-lazy-loader-componentPublic

NotificationsYou must be signed in to change notification settings
Fork0
Star2

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

codesandbox.io/p/sandbox/react-lazy-loader-component-m5mkpv

2 stars 0 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 19 Commits
example		example
src		src
.gitignore		.gitignore
README.md		README.md
index.d.ts		index.d.ts
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Repository files navigation

🔥 React Lazy Loader Component 🔥

📚 Introduction

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

🚀 Example

Check our 👉example

📦 Installation

# install with npmnpm install react-lazy-loader-component# install with yarnyarn add react-lazy-loader-component# install with pnpmpnpm add react-lazy-loader-component

🚀 Example Repo

In Repo

📦 Examples

🗂 Basic Usage

importReactfrom"react";import{LazyLoad}from"react-lazy-loader-component";constMyComponent=()=>(<LazyLoad><imgsrc="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";constMyComponent=()=>(<LazyLoadrootMargin={100}><imgsrc="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";constMyComponent=()=>(<LazyLoadrootMargin={100}threshold={0.95}><imgsrc="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";constMyComponent=()=>(<LazyLoadrootMargin={400}threshold={0.95}freezeOnceVisible={true}><imgsrc="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

importReact,{Suspense}from"react";import{LazyLoad}from"react-lazy-loader-component";constMyComponent=()=>(<Suspensefallback={<div>Loading...</div>}><LazyLoadrootMargin={100}><imgsrc="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

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

✏️ rootMargin

Type:String Default:0%

TherootMargin option allows you to specify how far below, above, to the left, and to the right of the viewport you want tobegin displaying your content. If you specify0, your content will be displayed as soon as it is visible in the viewport, if you want to load100px below or above the viewport, use100.

✏️ threshold

Type:number | number[] Default:0

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

✏️ className

Type:String

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

✏️ style

Type:CSSProperties

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

✏️ freezeOnceVisible

TypeBoolean

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

🔥 Building LazyLoad

pnpm build

🌈 Running examples

cd examplepnpm dev

📄 License

Back To The Top

About

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

codesandbox.io/p/sandbox/react-lazy-loader-component-m5mkpv

Releases

No releases published

Packages

No packages published

Movatterモバイル変換

jsdeveloperr/react-lazy-loader-component