Fullscreen Image Viewer For React – awesome-lightbox

Author:theanam
Views Total:17 views
Official Page:Go to website
Publish Date:July 6, 2020
License:MIT

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

You Might Be Interested In:

Leave a Reply