brahm-react-image-gallery

A lightweight React image gallery with lazy thumbnail images, keyboard-dismissable expanded previews, and @react-spring/web modal animation.

Install

npm install brahm-react-image-gallery @react-spring/web

Usage

import ImageGallery from 'brahm-react-image-gallery';
import 'brahm-react-image-gallery/styles.css';

const images = [
  {
    id: 1,
    src: 'https://example.com/photo.jpg',
    alt: 'City skyline at night',
    description: 'City skyline at night',
  },
];

export function GalleryDemo() {
  return <ImageGallery images={images} />;
}

The package also accepts url instead of src for compatibility with existing image lists.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | images | GalleryImage[] | [] | Images to render. Each item should include src or url. | | className | string | | Extra class for the gallery grid. | | thumbnailClassName | string | | Extra class for each thumbnail button. | | overlayClassName | string | | Extra class for the full-screen overlay. | | imageClassName | string | | Extra class for thumbnail images. | | closeLabel | string | Close expanded image | Accessible label and visible text for the close button. | | expandedLabel | string | | Accessible label for the expanded image dialog. | | renderCaption | (image) => ReactNode | | Custom caption renderer. Falls back to image.description. | | getImageKey | (image, index) => string \| number | | Custom key resolver. | | onImageOpen | (image) => void | | Called when a thumbnail opens. | | onImageClose | (image) => void | | Called when an expanded image closes. |

Styling

Import the default stylesheet and override CSS custom properties from a parent element:

.my-gallery {
  --image-gallery-min-tile-size: 14rem;
  --image-gallery-focus-ring: #f97316;
}

Publish

npm run build
npm publish --access public