Package Exports

react-gallery-albums
react-gallery-albums/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-gallery-albums) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Gallery Albums 🖼️

A lightweight, modular React library for creating beautiful photo galleries organized into albums, featuring built-in lightbox and Material-UI support.

✨ Features

Album-based display with customizable covers
Responsive lightbox with keyboard navigation (← → Esc)
Modern design powered by Material-UI
Zero dependencies (besides React and Material-UI)
Fully typed (TypeScript compatible)
Optimized performance with React.memo

🚀 Installation

npm install @marcoferrari91/react-gallery-albums
# or
yarn add @marcoferrari91/react-gallery-albums

💡 Basic Usage

import { Gallery, AlbumContent } from '@marcoferrari91/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", "/wedding2.jpg"]
  }
];

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/gallery" element={<Gallery albums={albums} />} />
        <Route path="/gallery/:albumSlug" element={<AlbumContent albums={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".

What is galleryPath?

The galleryPath prop allows you to customize the URL structure for your gallery. By default, the links to individual albums are generated as "/gallery/album-title". If you want to change this base URL, you can use the galleryPath prop.

How to use galleryPath:

Simply pass the desired base path as a string to the galleryPath prop of the Gallery component.

Example:
```
<Gallery albums={albums} galleryPath="/my-photos" />
```
In this example, the links to individual albums will be /my-photos/album-title instead of /gallery/album-title.

`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.