image-lazy-customer

@afiniti/image-lazy-load

Description

React component for lazy loading Graph CMS Images in an optimal way that is performance efficient. On initial page load, images are downloaded with low resolution and blur filter from graph cms. Once the image element is in active viewport, the blurred image is replaced with original HD image and blur effect is removed.

Note

This is a work in progress, not ready for production yet. Your feedback would be appreciated, custom features can also be requested.

Requirements

Currently, works only for image urls from graph media cms. Support for other image sources will be added as enhanced feature later on.

Installation

npm i @afiniti/image-lazy-load

Features

• Performance efficient, reduces initial load time by loading low resolution blur images on page load
• Optimal sized images generated automatically for different devices and screen sizes.
• Preview images whilst loading in form of blurred thumbnails
• Lazy loading enabling original HD images to download only when they are in the current viewport

Demo

Code Sandbox Demo

Props

Name	Type	Description
handle	string	Graph cms uses handle an identifier for images which is required to fetch images.
alt	string	Passed to theimg element for alternate prop
className	string|object	Passed to the wrapper div of image.Object must follow react css rules
width	number	Resolution need to be passed in order to display image. Defaults to 1400.
height	number	Optional value in pixels if fixed height needs to be added to image elements. Defaults to null. See styling instructions below for better understanding.
objectFitMode	bool	Fit image to be contained inside parent container. Defaults to false.
isLazy	bool	Load images lazily, low to high resolution when active in viewport. Defaults to true
breakpointWidths	array	Array of screen breakpoints for fluid image rendering and optimal sizes. Defaults to [320, 640, 1024]

Example Usage

The package can be integrated inside a react component as follows:

import React from 'react';
import Picture from '@afiniti/image-lazy-load';
import '@afiniti/image-lazy-load/lib/main.css';

const Gallery = ({ data }) => {
  return (
    <div className={galleryWrapper}>
      {data.map(item => (
        <Picture
          handle={item.Picturehandle}
          className={'galleryImage'}
          objectFitMode
          width={1300}
          alt={item.postTitle}
        />
      ))}
    </div>
  );
};

export default Gallery;

Css and Styling

A classname can be passed to the Picture component that is attached to the wrapper element.

• No height passed in className prop object: By default padding-bottom: 56.25% set on wrapper div.

• Set custom height using className prop object: Pass padding-bottom: 0% !important in addition to the height in order to overwrite the default styles.

Note:

• The default styles need to be imported in addition to the component import as can be seen in above example.
• Feel free to style the image elements by overwriting the default css.

Issues

You can open issues in the Bugs and Issues section on the connected repository.

Inspired by:

• graphcms-image
• Responsive and fluid images
• Lazy Loading using Intersection Observer