Package Exports

react-modules-lazy-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-modules-lazy-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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