Skip to content

Latest commit

 

History

History
40 lines (28 loc) · 1.59 KB

README.md

File metadata and controls

40 lines (28 loc) · 1.59 KB
Raw

LazyImage

A React Component for Progressive Image Loading.

Build Status npm version Dependency Status devDependency Status

LazyImage loads a low-res version of an image blurred before replacing it with a larger, higher-res image after it was loaded completely. Inspired by a blog article on Medium's progressive image loading by José Manuel Pérez: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

Install via npm

npm i --save lazyimage

Usage

import LazyImage from 'lazyimage'

...     

<LazyImage
  blurRadius="10"
  width="600"
  height="190"
  src="/path/to/very/large/image"
  low="/path/to/low/quality/image"
/>

Features

  • If no low-resolution source is provided a regular image is rendered.
  • blurRadius defaults to 10

Tests

Uses Lab, Code, Enzyme for unit tests. If you want to know more about React unit testing using Lab instead of Mocha or Tape read the blog post on Medium

Run tests with:

npm test