JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9
  • Score
    100M100P100Q56537F
  • License ISC

A library to display photos organized into albums

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

markdown

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
jsx
import { Galleria, PaginaAlbum } from '@marcoferrari91/react-gallery-albums';

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/galleria" element={<Galleria albums={albums} />} />
        <Route path="/galleria/:albumSlug" element={<PaginaAlbum albums={albums} />} />
      </Routes>
    </Router>
  );
}