React Media Gallery

A modern, responsive media gallery component for React applications with support for images and videos.

Features

• Responsive grid and list view layouts
• Image and video support
• Interactive preview mode with keyboard navigation
• Thumbnail navigation for easy browsing
• Support for favorites, delete, info, and download actions
• Metadata panel with detailed information
• Fully customizable via props

Installation

npm install react-media-gallery

Basic Usage

import React from 'react';
import { MediaGallery } from 'react-media-gallery';
import 'react-media-gallery/dist/styles.css'; // Import the styles

// Sample media items
const mediaItems = [
  {
    id: 1,
    type: 'image',
    title: 'Mountain Landscape',
    description: 'Beautiful mountain landscape at sunset',
    thumbnailUrl: 'https://example.com/thumbnail1.jpg',
    fullUrl: 'https://example.com/image1.jpg',
    createdAt: '2023-05-15T10:30:00Z'
  },
  {
    id: 2,
    type: 'video',
    title: 'Ocean Waves',
    description: 'Relaxing video of ocean waves',
    thumbnailUrl: 'https://example.com/thumbnail2.jpg',
    fullUrl: 'https://example.com/video1.mp4',
    duration: '02:30',
    createdAt: '2023-05-16T14:45:00Z'
  }
];

function App() {
  const handleFavorite = (id) => {
    console.log(`Toggle favorite for item ${id}`);
  };

  const handleDelete = (id) => {
    console.log(`Delete item ${id}`);
  };

  const handleInfo = (id) => {
    console.log(`Showing info for ${id}`);
  };

  const handleDownload = (id) => {
    console.log(`Download item ${id}`);
  };
  
  // Array of favorited item IDs
  const favoriteItems = [1];

  return (
    <div className="app">
      <h1>Media Gallery</h1>
      <MediaGallery
        mediaItems={mediaItems}
        onFavorite={handleFavorite}
        onDelete={handleDelete}
        onInfo={handleInfo}
        onDownload={handleDownload}
        favoriteItems={favoriteItems}
        defaultViewType="grid" // or 'list'
        defaultMediaType="all" // or 'image', 'video'
      />
    </div>
  );
}

export default App;

Props

MediaGallery Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | mediaItems | MediaItem[] | [] | Array of media items to display | | isLoading | boolean | false | Loading state of the gallery | | defaultViewType | 'grid' | 'list' | 'grid' | Initial view type | | defaultMediaType | 'all' | 'image' | 'video' | 'all' | Initial media type filter | | onFilterChange | (type: MediaType) => void | undefined | Callback when media type filter changes | | onFavorite | (id: number) => void | undefined | Callback when favorite is toggled | | onDelete | (id: number) => void | undefined | Callback when delete is clicked | | onInfo | (id: number) => void | undefined | Callback when info is clicked | | onDownload | (id: number) => void | undefined | Callback when download is clicked | | favoriteItems | number[] | [] | Array of favorited item IDs | | showInfoToggle | boolean | true | Whether to show the info toggle button | | className | string | '' | Additional CSS class name |

MediaItem Type

interface MediaItem {
  id: number;
  type: 'image' | 'video';
  title: string;
  description?: string | null;
  thumbnailUrl: string;
  fullUrl: string;
  duration?: string | null;
  createdAt: string;
}

Advanced Usage

You can also use the individual components to build custom layouts:

import { 
  GalleryGrid, 
  GalleryItem, 
  MediaPreviewModal 
} from 'react-media-gallery';

Customization

The gallery can be customized using CSS variables or by overriding the default styles.