react-progressive-media-loading

Demo: https://cdn.rawgit.com/DavisChang/react-progressive-media-loading/master/build/index.html

Usage

1. npm install

$ npm install react-progressive-media-loading --save

2. In your component.js

import ProgressiveImg from 'react-progressive-media-loading';

class Component extends React.Component {
  render () {
    const progressiveImgProps = {
      smallImageSource: 'small.png',
      normalImageSource: 'normal.png',
      imgAlt: 'img-alt',
      aspectRationFill: '50%',
    };

    return (
      <div>
        <h1>ProgressiveImg Component</h1>
        <a target="_blank" href="#">
          <ProgressiveImg
            { ...progressiveImgProps }
          />
        </a>
      </div>
    );
  };
};

3. component css

.
├── /build/
├── /coverage/
├── /demo/
├── /lib/          # component css (index.css)
├── /src/
├── /test/
└── package.json

How to Develop, Test, Build

1. How to develop module

$ npm run dev

2. How to test module

$ npm run test

3. How to build module

$ npm run build
$ npm run webpack