react-image-lazyload

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.

@todo

• Add unit tests
• Provide CSS styles fallback for those not using server-side rendering with Glamor

Credits

This package was created thanks to the following:

• React
• Glamor
• prop-types
• NextJS

Licence

Free for use by one and all under the General Public Licence. It would be nice if you use this in a project to give me a mention :)