Installation

Get started with react-bnb-gallery in minutes — install the package and drop it into your React project.

Quick Start

Install react-bnb-gallery using your preferred package manager:

pnpm add react-bnb-gallery

Usage

Import the stylesheet once in your app's entry point (e.g. main.tsx or _app.tsx):

import 'react-bnb-gallery/dist/style.css'

Then render the gallery component. The example below shows the minimal setup needed to get it working:

import { useState } from 'react';
import { ReactBnbGallery } from 'react-bnb-gallery';

const PHOTOS = [
  'https://images.unsplash.com/photo-1470238660368-09dd17cab0b5',
  'https://images.unsplash.com/photo-1565472604484-fd8b0414aaf3',
  'https://images.unsplash.com/photo-1594240094495-1b9177b5fefc',
];

function GalleryExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>
        Open gallery
      </button>
      <ReactBnbGallery
        show={open}
        photos={PHOTOS}
        onClose={() => setOpen(false)}
      />
    </>
  );
};