react-modules-lazy-loader

React component for lazy loading components, images or anything

Usage no npm install needed!

<script type="module">
  import reactModulesLazyLoader from 'https://cdn.skypack.dev/react-modules-lazy-loader';
</script>

README

LazyLoader

LazyLoader is a React component which allows you to lazy load images and components. LazyLoader is a wraper for Intersection Observer API.

Demo: https://mariiazimokha.github.io/react-modules-lazy-loader/

Installation

npm install react-modules-lazy-loader --save

Usage

Here's an example of basic usage:

import React, { Component } from 'react';
import LazyLoader from 'react-modules-lazy-loader';

const MyComponent = ({url}) => (
    <LazyLoader> 
        <img src={url}/>
    </LazyLoader>
);

Also you can specify placeholder and pass it to the component.


const MyPlaceholder = () => (
    <div className="my-placeholder">
        loading...
    </div>
);

const MyComponent = ({url}) => (
    <LazyLoader placeholder={MyPlaceholder}> 
        <img src={url}/>
    </LazyLoader>
);

Development

To start the project run:

npm run start

and open http://localhost:8080/

To run tests:

npm run test