image-component

Isomorphic image component, utilising lazy load and responsive transitions

Usage

JavaScript

Typically within your React component's render method:

const src1 = 'https://www.yourdomain.com/your-image-1.jpg';
const src2 = 'https://www.yourdomain.com/your-image-2.jpg';
const src3 = 'https://www.yourdomain.com/your-image-3.jpg';
const src4 = 'https://www.yourdomain.com/your-image-4.jpg';
 
<Image
    src={src1}
    width={1280}
    height={300}
    customParams= {{
        quality: 1,
    }}
    backgroundColor="#217CB5"
>
    <Source
        src={src2}
        width={320}
        height={300}
        imgProps={{
            media: '(max-width: 20em)'
        }}
    />
    <Source
        src={src3}
        width={640}
        height={300}
        imgProps={{
            media: '(min-width: 20.0625em) and (max-width: 40em)'
        }}
    />
    <Source
        src={src4}
        width={960}
        height={300}
        imgProps={{
            media: '(min-width: 40.0625em)'
        }}
    />
</Image>

Parameters

Image (parent) component

Source (child) component

Custom parameters

You can also pass through any other parameters as you would normally in React. This is usefull for passing parameters supported by react-imgix.

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.

Demo

When developing, run yarn 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 build && yarn start before previewing in your browser; everything will work in this mode.

@todo

• Enforce prop-types
• 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
• react-imgix
• 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 :)