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:

Fullscreen Image Viewer For React - awesome-lightbox

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

You Might Be Interested In:

Add Comment