https://github.com/trendyol/lazy-component-loader

https://github.com/trendyol/lazy-component-loader

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/trendyol/lazy-component-loader
• Owner: Trendyol
• Created: 2021-02-15T06:40:50.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2025-02-03T11:18:26.000Z (11 months ago)
• Last Synced: 2025-03-22T05:33:01.363Z (10 months ago)
• Language: TypeScript
• Size: 88.9 KB
• Stars: 3
• Watchers: 9
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Lazy Load Components Package

This package helps you load components with IntersectionObserver.

| Statements                                                                  | Branches                                                                  | Functions                                                                  | Lines                                                                  |

| --------------------------------------------------------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------- |

| ![Statements](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg) | ![Branches](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg) | ![Functions](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg) | ![Lines](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg) |

## Installation

```

yarn add component-lazy-loader

```

## Usage

Example:

```js

import React from "react";

import LazyComponent from "component-lazy-loader";

function App() {

  let length = 100,

    i = 0,

    arr = Array(length);

  while (i < length) arr[i++] = i;

  return (

    


      {arr.map((element, index) => {

        return (

          

                Placeholder

              

            }

            ratio={0.1}

          >

            


              Test Component

            

          

        );

      })}

    

  );

}

```


## Options

```ts

export interface LazyLoadComponentsProps {

  placeholder: React.Component;

  children: React.Component;

  force?: boolean; // default false

  ratio?: number; // default 0.1

  onVisible?: Function;

}

```