Image Lightbox

A controlled, full-screen image viewer rendered into a portal on document.body. It supports zoom, rotate, download and keyboard shortcuts (Esc to close, + / - to zoom, R to rotate). It's the viewer that ContentImage opens on click, but you can drive it yourself for any image: hold the open state and pass isOpen / onClose.

Import

1import { ImageLightbox } from "@yuhuanowo/yunui/content";

Example

ImageLightbox

PreviewCode

Open lightbox

Usage

1const [open, setOpen] = useState(false);
2 
3<button onClick={() => setOpen(true)}>View</button>
4<ImageLightbox
5  src={imageUrl}
6  alt="Generated image"
7  isOpen={open}
8  onClose={() => setOpen(false)}
9/>

Props