`<LightBox>`

This is modal dialog for displaying a "slideshow" of images or other documents.

The lightbox follows the modal pattern, and also contains forward and back buttons for changing the currently displayed item. Additionally Left and Right can be used to change the item.

The lightbox is compatible with using <Suspense> for displaying fallback content when waiting for an item to load.

Usage

const [open, setOpen] = useState(false);
const [index, setIndex] = useState(0);

<button
  type="button"
  aria-haspopup="dialog"
  aria-expanded={open}
  onClick={() => setOpen(!open)}
>
  Show
</button>;

{
  open && (
    <LightBox
      onClose={() => setOpen(false)}
      onChangeIndex={setIndex}
      index={index}
    >
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
    </LightBox>
  );
}

Props

The props are mostly the same as a <Modal>.

Prop	Type	Default	Purpose
active	Boolean	`true`	If set to false, the dialog is considered not active and will not close on Escape
arrow	Node		Adds content above the header. Intended for an error when positioning.
bodyClassName	String	`"react-dialogs-active-modal"`	This class is added to the `<body>` when the modal is active
children	[]<Node,Array>		Items to display
className	String	`null`	Class name of dialog
classPrefix	String	`"react-dialogs-lightbox"`	Class prefix for BEM classes
fallback	Node	`<div class="react-dialogs-loading" />`	Fallback for use with `<Suspense>`
focus	Boolean	`true`	Set false to disable focusing the dialog when rendered
id	String	Random value	The id of the dialog
index	Integer		The index of the item to display
inline	Boolean	`false`	If true, do not place in a portal
onClose	Function		Called when the dialog is closed. If omitted the close button will not be rendered and `Esc` will not close the dialog
onChangeIndex	Function		Callback for when the user changes which item is displaying

The items can be provided either as an array of React nodes, or as an array of objects.

Nodes - they must have the prop title and can have the prop actions. These are used as the modal's title and actions.
Objects - they must have the properties contents and title, and can have the property actions.

Customisation

A number of props are provided to customise the appearance of the component.

The nameProps props allow you to add your own attributes to each part, potentially overriding those already present. This is a good way to add your own classes.

The NameComponent props allow you to replace or override each component. Pass a lower-case string to change the html element, or a full component if you want a more far reaching change. Bear-in-mind you will have to forwardRef the DialogComponent component.

The ErrorComponent will be displayed if the item throws an error.

<ModalComponent className={`${classPrefix} ${classPrefix}--active`}                                       // <div>
  <DialogComponent className={`${classPrefix}__dialog ${className}`} {...dialogProps}>                    // <div>
    {arrow}                                                                                               // null
    <HeaderComponent className={`${classPrefix}__header`} {...headerProps} />                             // <div>
      <TitleComponent className={`${classPrefix}__title`} {...titleProps} />                              // <h2>
      {actions}                                                                                           // null
      <CloseButtonComponent className={`${classPrefix}__close-button`} {...closeButtonProps} />           // <button>
    </HeaderComponent>
    <BodyComponent className={`${classPrefix}__body`} {...bodyProps} />                                   // <div>
      <PreviousButtonComponent className={`${classPrefix}__previous-button`} {...previousButtonProps} />  // <button>
      <Suspense callback={fallback}
        <ItemComponent className={`${classPrefix}__item`} {...itemProps}>                                 // <div>
          <ErrorComponent className={`${classPrefix}__error} {...errorProps}>                             // <div>
            {item}
          </ErrorComponent>
        </ItemComponent>
      </Suspense>
      <NextButtonComponent className={`${classPrefix}__next-button`} {...nextButtonProps} />             // <button>
    </BodyComponent>
  </DialogComponent>
</ModalComponent>