Responsive collections
Render ordered gallery sections with configurable column width, gaps, and aspect ratios.
mazey-lazy-load-images
Render responsive, lazy-loaded image galleries with React 19, TypeScript, IntersectionObserver, placeholders, fallbacks, and retry controls.
npm install mazey-lazy-load-images react@^19.0.0 react-dom@^19.0.0Lazy-loading gallery features
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 peer dependencies.
npm install mazey-lazy-load-images react@^19.0.0 react-dom@^19.0.0Usage
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} />;
}