Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jsdeveloperr/react-lazy-loader-component

Fast 1.15KB, Gzip 0.63KB, React Component to lazy load and other components/elements and use the Intersection Observer API.
https://github.com/jsdeveloperr/react-lazy-loader-component

lazy-loading react react-lazy-load react-lazy-load-component react-lazy-loader-component react-lazy-loading react-lazyload

Last synced: 8 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/jsdeveloperr/react-lazy-loader-component
Owner: jsdeveloperr
Created: 2022-12-03T21:46:00.000Z (about 2 years ago)
Default Branch: master
Last Pushed: 2023-10-07T10:16:57.000Z (about 1 year ago)
Last Synced: 2024-08-10T10:51:41.174Z (4 months ago)
Topics: lazy-loading, react, react-lazy-load, react-lazy-load-component, react-lazy-loader-component, react-lazy-loading, react-lazyload
Language: TypeScript
Homepage: https://codesandbox.io/p/sandbox/react-lazy-loader-component-m5mkpv
Size: 1.06 MB
Stars: 3
Watchers: 2
Forks: 0
Open Issues: 4
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        



  


    

  



  🔥 React Lazy Loader Component 🔥

  


  






[![npm](https://img.shields.io/npm/v/react-lazy-loader-component?style=flat-square)](https://www.npmjs.com/package/react-lazy-loader-component)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-lazy-loader-component?style=flat-square)

![npm](https://img.shields.io/npm/dt/react-lazy-loader-component?style=flat-square)

![GitHub license](https://img.shields.io/npm/l/react-lazy-loader-component?style=flat-square)



### :books: Introduction

Fast 1.15KB, Gzip 0.63KB, React Component to lazy load and other components/elements and use the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

### :rocket: Example

Check our 👉 [example](https://codesandbox.io/p/sandbox/react-lazy-loader-component-m5mkpv)

### :package: Installation

```bash

# 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](https://github.com/jsdeveloperr/react-lazy-loader-component/blob/master/example)

### 📦 Examples

#### 🗂 Basic Usage

```tsx

import React from "react";

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

const MyComponent = () => (

  

    

  

);

```

#### 🗂 Loading the image 100px prior to scroll

```tsx

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

const MyComponent = () => (

  

    

  

);

```

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

```tsx

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

const MyComponent = () => (

  

    

  

);

```

#### 🗂 Performing a side effect once your image is loaded

```tsx

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

const MyComponent = () => (

  

    

  

);

```

#### 🗂 Suspense and Lazy import

```tsx

import React, { Suspense } from "react";

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

const MyComponent = () => (

  Loading...}>

    

      

    

  

);

```

#### 🎉 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 `` 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](#read-me-template)