react-pic

React component for progressive and responsive image loading.

react-pic works universally. On the server-side, it works by setting a default image (usually something very small to reduce data). On the client-side, it will try to load the optimal image based on prop data.

Installation

NPM:

npm install react-pic --save

CDN:

<script src='https://unpkg.com/react-pic@latest/dist/react-pic.umd.js'></script>

<!-- or use minified -->
<script src='https://unpkg.com/react-pic@latest/dist/react-pic.umd.min.js'></script>

Demo:

Usage

import React, { Component } from 'react';
import Pic from 'react-pic';

const images = [
  {
    width: 40,
    url: 'http://placehold.it/40?text=♥'
  },
  {
    width: 250,
    url: 'http://placehold.it/250?text=♥'
  }
];

export default class Example extends Component {
  render() {
    return <Pic images={images} />;
  }
}

Props

name	default	required	type	description
images		true	array	The collection of images you would like to use as a source.
alt		false	string	Text equivalent of the image. https://www.w3.org/QA/Tips/altAttribute
defaultIndex	0	false	number	The image object to use on initial render.
noscriptIndex	images.length-1	false	number	The image object to use on noscript render.
baseStyle	{ position: 'relative', margin: '-5px', overflow: 'hidden' }	false	object	Override the container style object.
imgStyle	{ margin: '0 auto', maxWidth: '100%', width: '100%' }	false	object	Override the image style object.
shouldBlur	false	false	boolean	Determines if the image should be blurred before setting the optimal image.
blurAmount	'20px'	false	string	The amount of blur. Expected format: '10px' or '15%'.
renderOutOfView	false	false	boolean	Determines if the optimal image should be selected even if not in view

Special Thanks

• To remarkablemark and tdlm for their feedback and review.

License

MIT