react-lightbox-kit

A reusable image lightbox for React. Click a photo and it opens full screen, with zoom, pan, keyboard navigation, and thumbnails already built in.

Features

• Zoom
• Pan
• Keyboard navigation
• Thumbnails
• Swipe on touch devices

Installation

npm install react-lightbox-kit

Usage

import { useState } from 'react'
import { Lightbox } from 'react-lightbox-kit'

const images = [
  { src: '/photos/1.jpg', alt: 'xyz' },
  { src: '/photos/2.jpg', alt: 'abc' },
]

function Gallery() {
  const [open, setOpen] = useState(false)
  const [index, setIndex] = useState(0)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <Lightbox
        images={images}
        open={open}
        index={index}
        onClose={() => setOpen(false)}
        onIndexChange={setIndex}
      />
    </>
  )
}

How it works

You control when the lightbox is open and which photo is active. It reports back through onClose and onIndexChange when those should change, and handles zoom, pan, and navigation internally.

License

MIT