LazyImage

An image component that uses @modern-kit/react/useIntersectionObserver to lazy load images when they enter the viewport.

Intersection Observer options can be configured (see Note below).

If you want to display a specific fallback component while an image is loading, use the FallbackLazyImage component, which extends LazyImage for declarative use.

Code

🔗 View source code

Interface

typescript

interface IntersectionObserverInit {
  root?: Element | Document | null;
  rootMargin?: string;
  threshold?: number | number[];
}

typescript

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

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

Usage

typescript

import { LazyImage } from '@modern-kit/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>
  );
};

Example

Scroll down.

Note

• Intersection Observer API