LazyImage

An image component that Lazy loading an assigned image when exposed to a Viewport.

You can resize the image by entering width, height values and at the same time improve the Layout Shift.

You can set the Intersection Observer Option (see Note below).

Interface

interface LazyImageProps
  extends React.ComponentProps<'img'>,
    IntersectionObserverInit {
  src: string;
}

const LazyImage: React.ForwardRefExoticComponent<Omit<LazyImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>

Usage

Default

import { LazyImage } from '@devgrace/react';
import img1 from '../assets/img1.png';
import img2 from '../assets/img2.png';

const Example = () => {
  return (
    <div>
      {/* ... */}
      <LazyImage width={400} height={400} src={img1} alt="img1" />
      {/* ... */}
      <LazyImage width={400} height={400} src={img2} alt="img2" />
      {/* ... */}
    </div>
  );
}; 

Fallback

import { LazyImage } from '@devgrace/react';
import img1 from '../assets/img1.png';

const Example = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  const wrapperStyle: CSSProperties = {
    position: 'relative',
    width: '400px',
    height: '400px',
  };

  const imgStyle: CSSProperties = {
    position: 'absolute',
    top: 0,
    left: 0,
    opacity: isLoaded ? 1 : 0,
    transition: 'opacity 0.2s',
  };

  const skeletonStyle: CSSProperties = {
    width: '400px',
    height: '400px',
    backgroundColor: '#cdcbcb',
  }

  return (
    <div style={wrapperStyle}>
      {!isLoaded && <div style={skeletonStyle} />}
      <LazyImage
        style={imgStyle}
        width={400}
        height={400}
        src={img1}
        alt="img1"
        onLoad={() => setIsLoaded(true)}
      />
    </div>
  );
}; 

Example

Please scroll down.

Note

Intersection Observer API