Get 30% off with our early-bird discount. For a limited time only!

Image

This component displays a singular image lightbox with a fade-in and fade-out animation. For displaying multiple images in a slideshow format, see the Slideshow Lightboxcomponent instead.

The following features are supported:

  • Zooming: Users can zoom through the mouse-wheel or single-click on desktop, and pinch-to-zoom on mobile devices.
  • Panning: Once an image is zoomed into, the image can be panned by dragging the image through the mouse, or if on a mobile device, with a swipe-to-drag motion.
  • Animations:When the user clicks on an image, a fade-in entry animation is displayed, which allows for a seamless transition effect between the content and the lightbox. A fade-out animation is displayed when the user exits from the lightbox.

Import

import {Image} from "lightbox.js-react"

Usage

To include an image that displays a lightbox when clicked, simply add the following:

<Image image={{src: "https://source.unsplash.com/Kk8mEQAoIpI/1600x1200", title: "Cyberpunk"}} />

This will render an image as shown below. Try clicking it to see the animation in action:

Check out the SlideshowLightbox component to display multiple images in a slideshow format.

Full example

import React, { Component } from 'react'
import {Image} from 'lightbox.js-react'
import 'lightbox.js-react/dist/index.css'

class Demo extends Component {
    render() {
        return (
          <div>
            <Image image={{src: "https://source.unsplash.com/Kk8mEQAoIpI/1600x1200", title: "Cyberpunk"}} />
          </div>
        )
    }
}

Full example using functional components

Here's an example using a functional component instead:

import React from 'react'
import {Image} from 'lightbox.js-react'
import 'lightbox.js-react/dist/index.css'
          
function Demo() {
return (
  <div>
  <Image image={{src: "https://source.unsplash.com/Kk8mEQAoIpI/1600x1200", title: "Cyberpunk"}} />
</div>
      )
}

This will display the following image gallery, along with a lightbox that will appear after one of the images are clicked:

Available Themes

There are 3 themes available, which can be selected via setting the `theme` prop:

  • day: A light theme with a white background and gray icons
  • night: A dark theme with gray icons
  • lightbox: A theme with a semi-transparent gray background

Day theme example

Night theme example

Lightbox theme example

Customization

Theme

If you'd like to change the theme of the lightbox, this can be done by passing a theme name to the theme prop, with the options including: "lightbox", "night", "day"

<Image theme="night" image={{src: "https://source.unsplash.com/Kk8mEQAoIpI/1600x1200", title: "Cyberpunk"}} />

Background Color

If you'd like to customize the background color of the lightbox, this can be done by passing a color to the color prop, as a RGB, RGBA, HEX or CSS color name value:

<Image backgroundColor="rgba(12, 12, 12, 0.8)" ... />

Icon Color

The icon colors can also be specified through the `iconColor` prop, and the color can be a RGB, RGBA, HEX or CSS color name value.

<Image iconColor="rgba(12, 12, 12, 0.8)" ... />

Props

theme

theme: String - The theme to be applied to the lightbox. Options include day, night, lightbox

backgroundColor

backgroundColor: String - the background color of the lightbox, as a CSS color name, RGBA value or HEX code

iconColor

iconColor: String - the icon color for the lightbox, as a CSS color name, RGBA value or HEX code