Skip to content
This repository has been archived by the owner on Jan 26, 2024. It is now read-only.
/ react-pic Public archive

React component for progressive and responsive image loading.

License

Notifications You must be signed in to change notification settings

benox3/react-pic

Repository files navigation

react-pic

NPM version Build Status Coverage Status

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:

demo-image

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

License

MIT