yet-another-react-lightbox

What is yet-another-react-lightbox?

yet-another-react-lightbox is a React component for creating customizable lightbox galleries. It supports various features such as image zoom, fullscreen mode, and keyboard navigation, making it a versatile choice for displaying images in a modern web application.

What are yet-another-react-lightbox's main functionalities?

Basic Lightbox

This code demonstrates how to create a basic lightbox gallery with a set of images. The `Lightbox` component is imported and used with an array of image objects.

import Lightbox from 'yet-another-react-lightbox';
import 'yet-another-react-lightbox/styles.css';

const images = [
  { src: 'image1.jpg', alt: 'Image 1' },
  { src: 'image2.jpg', alt: 'Image 2' }
];

function App() {
  return (
    <Lightbox slides={images} />
  );
}

Fullscreen Mode

This code sample shows how to enable fullscreen mode in the lightbox. By adding the `fullscreen` prop to the `Lightbox` component, users can view images in fullscreen.

import Lightbox from 'yet-another-react-lightbox';
import 'yet-another-react-lightbox/styles.css';

const images = [
  { src: 'image1.jpg', alt: 'Image 1' },
  { src: 'image2.jpg', alt: 'Image 2' }
];

function App() {
  return (
    <Lightbox slides={images} fullscreen />
  );
}

Image Zoom

This code demonstrates how to enable image zoom functionality in the lightbox. By adding the `zoom` prop to the `Lightbox` component, users can zoom in on images.

import Lightbox from 'yet-another-react-lightbox';
import 'yet-another-react-lightbox/styles.css';

const images = [
  { src: 'image1.jpg', alt: 'Image 1' },
  { src: 'image2.jpg', alt: 'Image 2' }
];

function App() {
  return (
    <Lightbox slides={images} zoom />
  );
}

Keyboard Navigation

This code sample shows how to enable keyboard navigation in the lightbox. By adding the `keyboard` prop to the `Lightbox` component, users can navigate through images using the keyboard.

import Lightbox from 'yet-another-react-lightbox';
import 'yet-another-react-lightbox/styles.css';

const images = [
  { src: 'image1.jpg', alt: 'Image 1' },
  { src: 'image2.jpg', alt: 'Image 2' }
];

function App() {
  return (
    <Lightbox slides={images} keyboard />
  );
}

Other packages similar to yet-another-react-lightbox

react-image-lightbox

react-image-lightbox is a flexible lightbox component for React applications. It supports features like image zoom, keyboard navigation, and customizable UI. Compared to yet-another-react-lightbox, it offers similar functionalities but with a different API and customization options.

react-photo-gallery

react-photo-gallery is a React component for creating responsive photo galleries. It focuses on layout and presentation, offering features like dynamic resizing and image sorting. While it does not provide a lightbox out of the box, it can be combined with lightbox components like yet-another-react-lightbox for a complete solution.

README

Yet Another React Lightbox

Modern lightbox component for React.

Overview

Coming soon...

Documentation

Coming soon...

Installation

npm install yet-another-react-lightbox

or

yarn add yet-another-react-lightbox

Minimal Setup Example

import * as React from "react";
import { Lightbox } from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

const Page = () => {
    const [open, setOpen] = React.useState(false);

    return (
        <>
            <button type="button" onClick={() => setOpen(true)}>
                Open Lightbox
            </button>

            <Lightbox
                open={open}
                close={() => setOpen(false)}
                slides={[
                    { src: "/image1.jpg" }, 
                    { src: "/image2.jpg" }, 
                    { src: "/image3.jpg" },
                ]}
            />
        </>
    );
};

export default Page;

License

MIT © Igor Danchenko