Exports
Everything the package exports besides the Lightbox component.
| Export | What it is |
|---|---|
Lightbox | The component. See Lightbox props. |
useLightboxHash(prefix, { count? }) | [index, setIndex] kept in the URL hash. See Deep linking. |
defaultLabels | The English labels, to extend instead of rewriting. See Labels. |
defaultIcons | The built-in icons. |
Icon | The SVG frame of the built-in icons. See Icons. |
getMedia(slide, { autoplay? }) | How a slide renders: image, video, youtube, vimeo or iframe, with the embed URL. |
previewOf(slide) | The still the grids and thumbnails show: thumbnail, poster, provider poster or the image. |
JustifiedGrid, MasonryGrid, UniformGrid | Optional grids. See Grids. |
GalleryFilter | Category filter. See Category filter. |
defaultGridLabels, defaultFilterLabels | English labels of the grids and the filter. |
fitContain(width, height, boxWidth, boxHeight) | The fit math the lightbox uses. Scales a size into a box, keeping its ratio, without upscaling. |
getMedia
import { getMedia } from "liftbox";
getMedia({ src: "/clip.webm" }); // { kind: "video" }
getMedia({ src: "https://vimeo.com/123" }); // { kind: "vimeo", embed: "https://player.vimeo.com/video/123?dnt=1" }
getMedia({ src: "/a.jpg" }); // { kind: "image" }An explicit type on the slide always wins. embed is set for youtube, vimeo and iframe, and poster for YouTube slides without their own.
fitContain
import { fitContain } from "liftbox";
fitContain(1600, 1067, 800, 600); // { width: 800, height: 534 }
fitContain(400, 300, 800, 600); // { width: 400, height: 300 }, never upscaled
fitContain(0, 0, 800, 600); // { width: 800, height: 600 }, unknown size fills the boxTypes
Slide, VideoSource, VideoTrack, Transition, ZoomOptions, VideoOptions, SlideshowOptions, DownloadOptions, LightboxHashOptions, LightboxProps, LightboxLabels, LightboxIcons, LightboxClassNames, LightboxRender, RenderSlideProps, Media, MediaKind and Size.
For the grids and the filter: GridProps, JustifiedGridProps, MasonryGridProps, UniformGridProps, GridHandle, GridLabels, GridClassNames, GridRender, RenderGridImageProps, Responsive, GridComponent, GalleryFilterProps, FilterLabels and FilterClassNames.
The grids and the filter are tree-shaken away when you only import Lightbox.