React-image-lazyload NPM

image-component

Isomorphic image component, utilising lazy load and responsive transitions

Usage

JavaScript

Typically within your React component's render method:

import LazyImage, { Source } from 'react-image-lazyload';

const lowres = 'https://www.yourdomain.com/your-image-1.jpg';
const small = 'https://www.yourdomain.com/your-image-2.jpg';
const medium = 'https://www.yourdomain.com/your-image-3.jpg';
const large = 'https://www.yourdomain.com/your-image-4.jpg';

<Image
    src={lowres}
    backgroundColor="#217CB5"
>
    <Source
        srcSet={small}
        media={'(max-width: 20em)'}
    />
    <Source
        srcSet={medium}
        media={'(min-width: 20.0625em) and (max-width: 40em)'}
    />
    <Source
        srcSet={large}
        media={'(min-width: 40.0625em)'}
    />
</Image>

Parameters

Parent component

Parameter	Type	Default value	Required	Description
backgroundColor	string	#cccccc	No	Background colour for image placeholder
height	string		No	Image placeholder height (can be px, em, rem, vh, etc)
src	string		Yes	Default image to render (typically lowres)
width	string		No	Image placeholder width (can be px, em, rem, vw, etc)

Source (child) component

Parameter	Type	Default value	Required	Description
srcSet	string		Yes	Default image to render
media	string		Yes	Media query parameters

Styling

This uses Glamor for CSS-in-JS styling. If you require server-side rendering please see the Glamor how-to.

This has been implemented in the demo with NextJS.

Build

Run yarn build to compile src code into the dist folder.

Demo

When developing, run yarn demo:dev. Then preview this in your browser. Please note, you will not be able to fully test lazyloading in this mode, as NextJS hot-reloading blocks the event used to detect the DOM loaded state.

To fully test, run yarn demo before previewing in your browser; everything will work in this mode.