React Infinite Gallery 🖼️

A beautiful infinite wraparound gallery React component that supports both images and videos with smooth animations and interactions.

Live Demo 🚀

Check out the live demo to see the component in action!

Installation 📦

npm install react-infinite-gallery

Or:

yarn add react-infinite-gallery

Features ✨

• 🔄 Infinite scrolling with smooth loading
• 📱 Fully responsive grid layout
• 🎯 Lazy loading of images for better performance
• ⚙️ Highly customizable grid settings
• 🎨 Clean and modern design
• 🚀 Lightweight and optimized for performance
• 🎨 Clean and modern design
• 🚀 Lightweight and optimized for performance

Usage 💻

import React from 'react';
import InfiniteGallery from 'react-infinite-gallery';
import 'react-infinite-gallery/dist/InfiniteGallery.css';

const itemsData = [
  { 
    id: 1, 
    type: 'image', 
    content: 'https://example.com/image1.jpg',
    badgeText: 'Sample',
    color: '#EF5350',  // Optional: custom color
    rotation: 2,       // Optional: custom rotation
    scale: 1.1         // Optional: custom scale
  },
  { 
    id: 2, 
    type: 'video', 
    content: 'https://example.com/video1.mp4',
    badgeText: 'Video',
    color: '#42A5F5'   // Optional: custom color
  },
  // Add more items as needed
];

function App() {
  return (
    <InfiniteGallery
      itemsData={itemsData}
      cardWidth={280}
      cardHeight={380}
      headerContent={<h1>Infinite Gallery</h1>}
      footerContent={<p>Gallery Footer</p>}
      galleryAnimate={true}
      badgeClass="custom-badge"
      stackInDuration={1500}
      stackOutDuration={1000}
      playButtonProps={{
        className: 'custom-play-btn',
        style: { backgroundColor: 'rgba(0,0,0,0.5)' },
        children: '▶'
      }}
      expandButtonProps={{
        className: 'custom-expand-btn',
        style: { backgroundColor: 'rgba(0,0,0,0.5)' }
      }}
      infoButton={<button>ℹ️</button>}
    />
  );
}

Props 🔧

Prop	Type	Default	Description
itemsData	Array	[]	Array of items to display. Each item should have: id, type ('image' or 'video'), content (URL), and optional badgeText, color, rotation, and scale
cardWidth	number	280	Width of each card in pixels
cardHeight	number	380	Height of each card in pixels
headerContent	ReactNode	null	Content to display at the top of the gallery
footerContent	ReactNode	null	Content to display at the bottom of the gallery
galleryAnimate	boolean	true	Whether to show the initial animation
badgeClass	string	''	Custom CSS class for badges
stackInDuration	number	1500	Duration of stack-in animation in milliseconds
stackOutDuration	number	1000	Duration of stack-out animation in milliseconds
playButtonProps	object	{}	Props for customizing the video play button
expandButtonProps	object	{}	Props for customizing the expand button
infoButton	ReactNode	null	Custom info button component

Item Data Structure

Each item in the itemsData array should have the following structure:

interface GalleryItem {
  id: number | string;          // Unique identifier
  type: 'image' | 'video';      // Type of content
  content: string;              // URL of the content
  badgeText?: string;           // Optional badge text
  color?: string;               // Optional custom color
  rotation?: number;            // Optional rotation in degrees
  scale?: number;               // Optional scale factor
}

CSS Customization

The component comes with default styles but can be customized using CSS classes:

• .ig-gallery - Main gallery container
• .ig-card - Individual card container
• .ig-badge - Badge element
• .ig-play-btn - Video play button
• .ig-expand-btn - Expand button
• .ig-info-panel - Info panel

Important Notes ⚠️

• A minimum of 20 images is required for optimal performance and user experience
• Supported image formats: jpg, png, webp
• For best performance, use appropriately sized and optimized images
• Make sure to import the CSS file as shown in the usage example

Example

Check out the usage-example.jsx file in the repository for a complete implementation example.

License 📄

MIT