Socket
Socket
Sign inDemoInstall

react-awesome-lightbox

Package Overview
Dependencies
4
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-awesome-lightbox

lightbox image viewer for react with zoom, rotate. Single or multi image mode and touch support


Version published
Maintainers
1
Weekly downloads
7,730
decreased by-13.28%

Weekly downloads

Readme

Source

Lightbox-like Image viewer for React

Lightbox image image viewer for react with zoom, rotate and move feature with single or multi image. Includes basic touch support.

🚀See it in Action

imgur

Features

  • Fully Responsive
  • Smooth tranformation
  • 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

Once installed, include it in your project like this:

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

Lightbox can be customized with the following properties

propertydefaultdescription
imagen/aURL to the image to show
while in single image mode
titlen/aTitle to show with the single image
imagesnullTakes an array of inage
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"}...]
startIndex0If the lightbox is in multiple image mode,
the starting image index
zoomStep0.3Step for zoom in or zoom out,
1 means 100% so, default 0.3 means 30%
onClosenullThis function determines how to
react when the close button is pressed
allowZoomtrueDetermines if image zoom controls should be shown
allowRotatetrueDetermine if image rotate controls should be shown
allowResettrueDetermine if reset buttons should be shown
buttonAlign"flex-end"Determine how to align the toolbar buttons
options are: flex-end, flex-start, center
showTitletrueDetermines if title should be shown if available
keyboardInteractiontrueDetermine if keyboard shortcuts will be allowed
See below section for available
Shortcuts
doubleClickZoom4Determine how much to zoom in if double clicked.
default 4 means close to 400%.
Setting it to 0 will disable
doubleclick/ double tap zoom
onNavigateImagenullCallback 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 allowrd), if no transformation is left to reset it will trigger the onClose function (close the lightbox).

Styling

All the styles are in the build/style.css file. If you want to modify the CSS, download this file and customize it. then include the custom CSS file instead of the file from the package.

Todo:

  • Pinch to Zoom

Released under the MIT license. Icons are from Icofont. Contributions are welcome 🖤

Keywords

FAQs

Last updated on 21 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc