A lightweight, customizable React photo gallery component with smooth transitions and lazy loading.

Features

• 🖼️ Responsive image gallery with thumbnails
• ⚡ Lazy loading of full-size images
• 🎨 Fully customizable with styled-components or CSS
• 🔄 Smooth transitions and animations
• 🎯 TypeScript support
• 📱 Mobile-friendly
• 🧪 Well-tested
• 📚 Storybook documentation

Installation

npm install super-basic-react-photo-gallery

Usage

import { Gallery } from 'super-basic-react-photo-gallery';

const images = [
  {
    full: 'path/to/full/image1.jpg',
    thumb: 'path/to/thumbnail1.jpg',
  },
  {
    full: 'path/to/full/image2.jpg',
    thumb: 'path/to/thumbnail2.jpg',
  },
];

function App() {
  return <Gallery images={images} />;
}

Props

Prop	Type	Default	Description
images	Array<{ full: string, thumb: string }>	Required	Array of image objects with full and thumbnail URLs
numberToLoadInAdvance	number	3	Number of full-size images to preload before and after the current image

Styling

The gallery can be styled using styled-components or regular CSS. All elements have data attributes for easy targeting:

import styled from 'styled-components';
import { Gallery } from 'super-basic-react-photo-gallery';

const StyledGallery = styled(Gallery)`
  // Style the main container
  [data-testid="gallery-root"] {
    background: #f5f5f5;
  }

  // Style the main image
  [data-testid="gallery-main-image"] {
    border-radius: 8px;
  }

  // Style thumbnails
  [data-testid="gallery-thumbnail"] {
    border: 2px solid transparent;
    &[data-selected="true"] {
      border-color: #0066cc;
    }
  }

  // Style navigation buttons
  [data-testid="gallery-prev-button"],
  [data-testid="gallery-next-button"] {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    &:hover {
      background: rgba(0, 0, 0, 0.7);
    }
  }
`;

Development

# Install dependencies
npm install

# Run tests
npm test

# Run Storybook
npm run storybook

# Build the package
npm run build

License

MIT © Dan Herbert