Fullscreen Image Viewer For React – awesome-lightbox

An easy yet user-friendly image viewer component that displays images in a responsive, fullscreen lightbox.

More Features:

• Image zoom
• Image rotation
• Image caption
• Image navigation

Basic Usage:

1. Install and import the component.

# Yarn
$ yarn add react-awesome-lightbox

// Required component 
import Lightbox from "react-awesome-lightbox";
// Required stylesheet
import "react-awesome-lightbox/build/style.css";

2. Apply the image viewer to a single image.

<Lightbox image="1.jpg" title="Image Description" />

3. Apply the image viewer to a group of images.

<Lightbox images={images} />

let images = [
    {
      url:"1.jpg",
      title:"Image Description 1"
    },
    {
      url:"2.jpg",
      title:"Image Description 2"
    },
    {
      url:"3.jpg",
      title:"Image Description 2"
    },
    // more images here
]

Preview:

Download Details:

Author: theanam

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/theanam/react-awesome-lightbox

License: MIT