React Gallery Albums 🖼️

A lightweight, modular React library for creating beautiful photo galleries organized into albums.

✨ Features

• Album-based display with customizable covers
• Responsive layout
• Zero dependencies (besides React)
• Fully typed (TypeScript compatible)
• Optimized performance with React.memo

🚀 Installation

npm install react-gallery-albums
# or
yarn add react-gallery-albums

💡 Basic Usage

import { Gallery, AlbumContent } from 'react-gallery-albums';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const albums = [
  {
    title: "Vacation",
    images: ["/img1.jpg", "/img2.jpg"]
  },
  {
    title: "Wedding", 
    images: ["/wedding1.jpg", "/img2.jpg"]
  }
];

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/gallery" element={<Gallery albums={albums} galleryPath="/my-albums"/>} />
        <Route path="/gallery/:albumSlug" element={<AlbumContent albums={albums} galleryPath="/my-albums" />} />
      </Routes>
    </Router>
  );
}

⚙️ Props

Gallery Component

• albums: An array of album objects. Each album object should have a title and an images property (array of image URLs).
• galleryPath: (Optional) A string that defines the base path for the album links. Defaults to "/gallery". This allows customization of the URL structure for the gallery.

Example:

<Gallery albums={albums} galleryPath="/my-albums" />

If you use the above prop, this will generate links like /my-albums/vacation and /my-albums/wedding when you click on an album. The default is /gallery. The Route path should still be set to /gallery

AlbumContent Component

• albums: An array of album objects, same as the Gallery component. This is necessary for the component to find the correct album based on the URL.
• galleryPath: (Optional) A string that defines the base path for the album links. It should match the galleryPath prop used in the Gallery component. Defaults to "/gallery".