react-lazy-blur-image

Load low resolution / placeholder image first and then load the actual image lazily when it's in the viewport.

Example with 1000 images

:zap: How does it work ?

The component starts by displaying a lightweight gray placeholder (base64 encoded).

When the component is about to reach the viewport, the gray placeholder is replaced with the actual placeholder you provided (Can be any image. Either local placeholder or remote low resolution image) and at the same time the actual image is loaded lazily and replaces the placeholder when it's fully loaded.

This gives us an absolute perfect user experience / performance balance.

:zap: Installation

The package is available on npm.

npm i -s react-lazy-blur-image

yarn add react-lazy-blur-image

:zap: Usage

This component expects exactly one child which has to be a function. You get the src and the style to apply (for blur effect)

import React from 'react';
import LazyImage from 'react-lazy-blur-image';

const App = () => {
  return (
    <LazyImage
        placeholder={'http://example.com/placeholder.png'}
        uri={'http://example.com/src.png'}
        render={(src, style) => <img src={src} style={style} />}
    />
  );
};

The child which is a function will have access to src and style (for blur effect) values as arguments.

| Render prop | Description | Type | Value | | ----------- | --------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------- | | src | The src of the image being rendered | String | Initially points to the placeholder image, then loads image and will then point to the source image | | style | Style props to apply to your rendered image (blur effect) | Object | Jsx style object |

Example usage with styled-components

You can use styled-components, to transition an image from the placeholder when the image has loaded. You can use the render props as mentioned above and then use it to animate the opacity of the image from 0.2 to 1 when the image is loaded. This is , of course, a basic example. But you can use this logic to create more powerful animations.

For eg :

import React, { Component } from 'react';
import styled from 'styled-components';
import LazyImage from 'react-lazy-blur-image';

const Image = styled.img`
  height: 450px;
  width: 800px;
  margin-top: 200px;
  display: block;
  object-fit: cover;
`;

const Usage = () => {
  return (
    <LazyImage
        uri={'/assets/imageURL'}
        placeholder={'/assets/placeholderURL'}
        render={(src, style) => <Image src={src} style={style} />}
    />
  );
};

How was this package made 🔧

A good amount of code has been inspired from react-progressive-image, the additions being the usage of react-visibility-sensor to check if there is a need to load the image and making sure that the image doesn't load in advance when it's not really needed. It's also refactored to make use of the new React 16+ hook system.

🙏 Credits

1. Formidable Labs
2. Josh Johnston
3. Bhargav Ponnapalli (Found out about his library by searching a free name on npmjs.com turned out our components are almost the same. Inspired the README)