mazey-lazy-load-images

Render responsive, lazy-loaded image galleries with React 19, TypeScript, IntersectionObserver, placeholders, fallbacks, and retry controls.

Open playground View API documentation View on GitHub

npm install mazey-lazy-load-images

Lazy-loading gallery features

Responsive collections

Render ordered gallery sections with configurable column width, gaps, and aspect ratios.

Viewport-aware loading

Reveal images through IntersectionObserver with placeholders, fallbacks, and retry feedback.

React and imperative APIs

Use the React component directly or mount, update, and destroy a gallery through the root API.

Install

React 19 and React DOM are included as package dependencies.

npm install mazey-lazy-load-images

Usage

Import the public React component and pass collections with accessible image descriptions.

import { LazyImageGallery } from "mazey-lazy-load-images";

const items = [{
  title: "Trip photographs",
  images: [{ src: "/photo.jpg", alt: "Garden in spring" }],
}];

export function Gallery() {
  return <LazyImageGallery items={items} />;
}