Lightbox

A lightbox is a type of modal that takes up the whole viewing area and dims and blurs the background content. The lightbox is typically used to display some type of slideshow of content such as images or videos.

The lightbox has three components: a header that display information about the content, a content area to display content, and a footer that provides functionality for manipulating the content

Usage

import Button from '@wedgekit/button';
import Lightbox from '@wedgekit/lightbox';

const Example = () => {
  const [lightboxIndex, setLightboxIndex] = React.useState(0);
  const [showLightbox, setShowLightbox] = React.useState(false);

  return (
    <>
      <Button
        onClick={() => {
          setShowLightbox(true);
        }}
      >
        Open Lightbox
      </Button>
      {showLightbox && (
        <Lightbox
          onChange={(index, e) => setLightboxIndex(index)}
          index={lightboxIndex}
          label="Preview Contents"
          onExit={() => setShowLightbox(false)}
        >
          <img src="https://picsum.photos/400/600" />
          <img src="https://picsum.photos/600/900" />
        </Lightbox>
      )}
    </>
  );
};

render(<Example />);

Props

children

Type: JSX.Element

Required: ✅

Children is an array of content shown in the Lightbox. These elements are typically <iframe>, <video>, or <img>

className

Type: string

Required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

footer

Type: JSX.Element

Required: ❌

JSX that renders as the footer of the Lightbox.

header

Type: JSX.Element

Required: ❌

JSX that renders as the header of the Lightbox.

index

Type: number

Required: ✅

Current index of the content being viewed

label

Type: string

Required: ✅

Aria compliant text for all child components to be 'labeled-by', required on all wedgekit components.

loop

Type: boolean

Required: ❌

Determines whether or not the Lightbox will loop the elements in the array by connecting the 0th element to the last element

onChange

Type: {(index: number, e: React.SyntheticEvent) => void}

Required: ✅

Event notifying a change in the Lightbox content. e.target.dataset.pageChange will return the direction of lightbox content change either next or previous

onExit

Type: () => void

Required: ✅

Function that will fire when the Lightbox is closed.

Default Lightbox Components

@wedgekit/lightbox offers default stylings for frequently used subcomponents of Lightbox. DefaultHeader, DefaultFooter, and DefaultPreviewUnavailable can be consumed like so:

import Button from '@wedgekit/button';
import Lightbox, { DefaultFooter, DefaultHeader } from '@wedgekit/lightbox';

const Example = () => {
  const [lightboxIndex, setLightboxIndex] = React.useState(0);
  const [showLightbox, setShowLightbox] = React.useState(false);

  return (
    <>
      <Button
        onClick={() => {
          setShowLightbox(true);
        }}
      >
        Open Lightbox
      </Button>
      {showLightbox && (
        <Lightbox
          footer={<DefaultFooter />}
          header={
            <DefaultHeader
              title="Lightbox Header"
              header={lightboxIndex}
              onExit={() => {
                setShowLightbox(false);
              }}
            />
          }
          index={lightboxIndex}
          label="Preview Contents"
          onChange={(index, e) => setLightboxIndex(index)}
          onExit={() => setShowLightbox(false)}
        >
          <img src="https://picsum.photos/400/600" />
          <img src="https://picsum.photos/600/900" />
        </Lightbox>
      )}
    </>
  );
};

render(<Example />);