Fluxo UIFluxo UIv0.1.1

Lightbox

A popover/modal component for previewing content on hover or click, with zoom-out support for large layouts.

Basic Usage

Lightbox Variants

Hover and click triggers with normal and zoomed-out views.

Hover for image preview

Image loads in a popover

import { Lightbox } from 'fluxo-ui';

<Lightbox
  trigger="hover"
  content={<img src="https://picsum.photos/400/300" />}
>
  <span>Hover me</span>
</Lightbox>

<Lightbox
  trigger="click"
  position="center"
  zoomOut
  zoomScale={0.4}
  content={<LargeComponent />}
  header="Zoomed Preview"
>
  <Button>Click to preview</Button>
</Lightbox>

Import

import { Lightbox } from 'fluxo-ui';
import type { LightboxProps } from 'fluxo-ui';

Props

childrenreq
ReactNode

Trigger element that opens the lightbox.

contentreq
ReactNode

Content to display inside the lightbox.

trigger
'hover' | 'click'"'hover'"

How the lightbox is triggered.

position
'auto' | 'top' | 'bottom' | 'left' | 'right' | 'center'"'auto'"

Position of the lightbox popover. Center shows as a modal.

width
string | number"400"

Width of the lightbox panel.

height
string | number

Height of the lightbox panel.

zoomOut
boolean"false"

Enable zoomed-out view mode. Content renders at full size but scaled down.

zoomScale
number"0.5"

Scale factor for zoomed-out view (0.1 to 1).

zoomWidth
string | number"'100vw'"

Width of the content container in zoom-out mode.

zoomHeight
string | number"'100vh'"

Height of the content container in zoom-out mode.

backdrop
boolean"true"

Show backdrop overlay (center position only).

closeOnBackdropClick
boolean"true"

Close when clicking the backdrop.

closeOnEscape
boolean"true"

Close on Escape key press.

showCloseButton
boolean"true"

Show close button in header.

hoverDelay
number"300"

Delay before opening on hover (ms).

hoverCloseDelay
number"200"

Delay before closing after mouse leaves (ms).

header
ReactNode

Header content.

footer
ReactNode

Footer content.

disabled
boolean"false"

Disable the lightbox trigger.

onOpen
() => void

Called when lightbox opens.

onClose
() => void

Called when lightbox closes.

Features

Hover & Click

Trigger lightbox on hover for quick previews or click for persistent viewing.

Smart Positioning

Auto-positions based on available space. Supports top, bottom, left, right, and center.

Zoom-Out View

Render large components at full size but display them scaled down for bird-eye previews.

Accessible

Keyboard navigation, Escape to close, ARIA roles, and focus management.