doorvel-gallery

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