Lightbox-like Image viewer for React

🚀See it in Action

!imgur

Features

• Fully Responsive
• Smooth transformation
• Single Image Mode
• Multiple Image Mode
• Virtually unlimited zoom steps and move Support
• Full 360 degree rotate support
• Touch Support
• Full keyboard support
• Supports all major browsers

How to use

Setting up

To install, run the following command with your favourite package manager:

yarn add react-awesome-lightbox

import Lightbox from "react-awesome-lightbox";
// You need to import the CSS only once
import "react-awesome-lightbox/build/style.css";

Then use it like this for single image:

<Lightbox image="image_url" title="Image Title" />

or for multiple images:

let images = [
    {
        url:"image_url1",
        title:"image title 1"
    },
    {
        url:"image_url2",
        title:"image title 2"
    }
]
<Lightbox images={images} />

Available properties

| property | default | description | |----------|---------|-------------| |image|n/a|URL to the image to show
while in single image mode| |title|n/a|Title to show with the single image| |images|null| Takes an array of image
and starts the lightbox
in multi image mode. *If you supply both image and
images prop, image is ignored.
supported formats : ["url1","url2"...]
or
[{url:"url",title:"title"}...]| |startIndex|0|If the lightbox is in multiple image mode,
the starting image index| |zoomStep|0.3|Step for zoom in or zoom out,
1 means 100% so, default 0.3 means 30%| |onClose|null|This function determines how to
react when the close button is pressed| |allowZoom|true|Determines if image zoom controls should be shown| |allowRotate|true|Determine if image rotate controls should be shown| |allowReset|true|Determine if reset buttons should be shown| |buttonAlign|"flex-end"|Determine how to align the toolbar buttons
options are: flex-end, flex-start, center| |showTitle|true|Determines if title should be shown if available| |keyboardInteraction|true|Determine if keyboard shortcuts will be allowed
See below section for available
Shortcuts| |doubleClickZoom|4|Determine how much to zoom in if double clicked.
default 4 means close to 400%.
Setting it to 0 will disable
doubleclick/ double tap zoom| |onNavigateImage|null|Callback when image is navigated. It accepts the
new index as its parameter.|

Keyboard Shortcut:

• Arrow keys ← , →, when zoomed out, will navigate between images in multi image mode.
• When Zoomed in, ←, →, ↑, ↓ keys will move the image
• + and - will zoom in and out the image is zoom is allowed.
• esc will reset transformation (if reset is allowed), if no transformation is left to reset it will trigger the onClose function (close the lightbox).

Styling

Changelog

1.9.0

• Supports React 18 and 19 (peer dependency widened to ^16.8||^17||^18||^19) — #18, #21, #23
• Published bundle rebuilt; it now actually includes onNavigateImage — #16
• Fixed loading spinner getting stuck on cached or duplicate images — #8
• Fixed image jumping when dragging after a reset or navigating to another image — #12 (thanks @mathieu-nomadeec)
• Fixed image getting text-selected on quick clicks in Firefox — #10
• Build tooling moved to webpack 5; CI publishes only when the version is new

Todo:

• Pinch to Zoom