Description:
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:
