lazyimage
v2.1.2
Published
A React Component for Progressive (Lazy) Image Loading
Downloads
6
Readme
LazyImage
A React Component for Progressive Image Loading.
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 to10
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