Package Exports

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 (gallery-tour) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Airbnb Gallery React Library

A modern, responsive, Airbnb-style gallery component for React. Features a beautiful grid, sectioned view, and modal/lightbox with swipe, fade, and thumbnail navigation. Built with React, Tailwind CSS, and Embla Carousel.

✨ Features

Responsive Airbnb-style grid (first image large, others small)
Sectioned view for grouped images
Modal/lightbox with swipe (mobile) and fade (desktop)
Keyboard navigation, thumbnails, and custom modal buttons
TypeScript support
Easily theme with Tailwind CSS

🚀 Installation

npm install @your-org/airbnb-gallery embla-carousel-react

Peer dependencies:

react (>=17)

react-dom (>=17)

embla-carousel-react (>=8)

🛠 Usage

import { Gallery } from '@your-org/airbnb-gallery'

const images = [
  'https://images.unsplash.com/photo-1.jpg',
  'https://images.unsplash.com/photo-2.jpg',
  'https://images.unsplash.com/photo-3.jpg',
  // ...
]

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

Sectioned View Example

import { Gallery, GalleryImage } from '@your-org/airbnb-gallery'

const sectionedImages: GalleryImage[] = [
  { url: '...', label: 'Living Room', section: 'Living' },
  { url: '...', label: 'Kitchen', section: 'Kitchen' },
  // ...
]

<Gallery images={sectionedImages} mode="sections" sectionsTitle="Tour" />

📦 API

`Gallery` Props

Prop	Type	Default	Description
images	`string[] \| GalleryImage[]`	required	Array of image URLs or objects
mode	`'grid' \| 'sections'`	`'grid'`	Display mode
buttonLabel	`string`	`'Show all photos'`	Text for the grid overlay button
customModalButtons	`React.ReactNode`	`undefined`	Custom buttons in modal (e.g. share, save)
sectionsTitle	`string`	`'Photos'`	Title for sectioned view

`GalleryImage` Type

type GalleryImage = {
  url: string;
  label?: string;
  section?: string;
}

🎨 Customization

Style with Tailwind CSS classes (override or extend as needed)
Pass custom buttons (e.g. share, save) to the modal
Use your own section/grouping logic with GalleryImage[]

🧪 Testing

This library is fully tested with Vitest and React Testing Library. To run tests:

npm test

📄 License

MIT

gallery-tour