12.24.0

Lightbox

The Lightbox kit is a popup window overlay that will appear on top of your webpage and cover the entirety of the screen. It can be used to display a group of images that the user can swipe through, zoom into and view. The button in the top left of the header can be used to close the overlay and exit back to your webpage. Click the images in the examples below to see Lightbox in action.

Default


Lightbox contains several props: photos (an array of urls), initialPhoto (a number), onClickLeft (an optional callback function for top left close button), title and description (string or custom components), icon ( optional prop for the close button in the top left of the header), navRight (optional prop that renders clickable text in the top right section of the header), onClickRight (optional callback function of navRight) and onChange (optional event handler prop exposing index of current photo).

Multiple


When multiple images are passed to the Lightbox kit, it will also display scrollable thumbnails at the bottom of the screen for easier access to all images. In addition to the scrollable thumbnails, larger screens provide arrow buttons on the left and right of the image itself for easier scrolling while on mobile devices the kit allows for swiping.
This example also highlights the use of the optional onChange prop which is an event handler prop that tracks the index of the image being viewed and exposes it for use by the developer.

Compound Component


title and description are optional props that can be passed to the kit if needed. Each of these props can take a string OR a custom component. This example highlights what the kit will look like when only strings are passed as title and description.

Custom Header


title and description props also accept custom components if needed. The optional navRight prop only accepts a string that translates into a clickable button. onClickRight prop can be used to pass in click function for navRight.

Current Photo


The currentPhotoIndex prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the onChange prop.


Available Props