react-power-picture

React Power Picture

Render images in your React application that take advantage of progressive loading as well as responsive sizing. Serviced by a render prop for excellent integration with all your projects.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save react-power-picture

This package also depends on react and prop-types. Please make sure you have those installed as well.

Usage

import React from 'react';
import { render } from 'react-dom';
import PowerPicture from 'react-power-picture';

sources = [
  {
    size: 400,
    src: 'https://source.unsplash.com/random/200x140'
  },
  {
    size: 800,
    src: 'https://source.unsplash.com/random/300x200'
  },
  {
    size: 1200,
    src: 'https://source.unsplash.com/random/400x300'
  }
];

render(
  <PowerPicture sources={sources}>
    {(image, loading) => (
      <div>
        <p>Loading state: {loading.toString()}</p>
        <img alt="A p!cture is worth a thousand words" src={image} />
      </div>
    )}
  </PowerPicture>,
  document.getElementById('root')
);

Examples

A live example of this in action can be found on the project's GitHub page.

Inspiration

This project has been heavily inspired by the work of Formidable Labs and their react-progressive-image library. It does many things exactly right but did not provide the responsive solution that I was originally looking for.

Another shoutout to the react-simple-image library. This project has everything for responsive images loaded as a srcset but with much broader prop support and less render flexibiliy.

You might consider React Power Picture to be a marriage of the two. My goad for this library to provide both progressive and responsive power.

License

MIT