react-modules-lazy-loader

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