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

``js
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 (
<>
onClick={() => {
setShowLightbox(true);
}}
>
Open Lightbox

{showLightbox && (
onChange={(index, e) => setLightboxIndex(index)}
index={lightboxIndex}
label="Preview Contents"
onExit={() => setShowLightbox(false)}
>



)}

);
};

render();
`

Props

$3

Type: JSX.Element

Required: ✅

Children is an array of content shown in the Lightbox. These elements are typically