React Advanced Gallery

A fully customizable React image gallery component with advanced features, inspired by LightGallery but with extended functionality and a modern design.

Features

Core Features

• Thumbnail navigation
• Fullscreen mode
• Zoom in/out capabilities
• Multiple transition animations (fade, slide, zoom)
• Keyboard, mouse, and touch navigation
• Lazy loading and image preloading
• Multiple layout options (grid, masonry, carousel)
• Light/dark mode support

Image Features

• Support for images, videos, and external links
• Caption and metadata display (title, description, EXIF data)
• Favorite/star functionality
• Image removal capability
• File upload support

Customization

• Built-in Bootstrap-compatible styling
• Customizable layouts and animations
• Extensible with hooks for various events (click, slide change, etc.)
• Custom icon support
• Easily override styles with your own CSS

Installation

1npm install react-advanced-gallery
2# or
3yarn add react-advanced-gallery

Basic Usage

1import { ImageGallery } from 'react-advanced-gallery';
2import 'react-advanced-gallery/dist/styles.css';
3
4const images = [
5  {
6    id: '1',
7    src: 'https://example.com/image1.jpg',
8    thumbnail: 'https://example.com/thumbnail1.jpg',
9    alt: 'Description of image 1',
10    title: 'Image 1 Title',
11    description: 'This is the first image',
12    type: 'image',
13    isFavorite: false
14  },
15  // More images...
16];
17
18function App() {
19  return (
20    <div className="App">
21      <ImageGallery 
22        images={images}
23        layout="grid"
24        animation="fade"
25      />
26    </div>
27  );
28}

Props

Prop	Type	Default	Description
images	GalleryItem[]	Required	Array of image objects
layout	'grid' | 'masonry' | 'carousel'	'grid'	Layout style for the gallery
animation	'fade' | 'slide' | 'zoom' | 'none'	'fade'	Animation type for transitions
thumbnailsPosition	'bottom' | 'top' | 'left' | 'right'	'bottom'	Position of thumbnails in fullscreen mode
enableZoom	boolean	true	Enable zoom functionality
darkMode	boolean	false	Force dark mode (otherwise follows system/theme)
onImageClick	(image: GalleryItem) => void	-	Callback when an image is clicked
onFavoriteToggle	(image: GalleryItem) => void	-	Callback when favorite status is toggled
onImageRemove	(image: GalleryItem) => void	-	Callback when an image is removed
onImageUpload	(files: File[]) => void	-	Callback when files are uploaded

Image Object Structure

1interface GalleryItem {
2  id: string;
3  src: string;
4  thumbnail: string;
5  alt: string;
6  title: string;
7  description: string;
8  metadata?: {
9    camera?: string;
10    lens?: string;
11    aperture?: string;
12    shutterSpeed?: string;
13    iso?: string;
14    focalLength?: string;
15    dateTaken?: string;
16    fileSize?: string;
17    dimensions?: string;
18  };
19  type: 'image' | 'video' | 'external';
20  isFavorite: boolean;
21}

License

MIT