liftbox

Labels and i18n

Translate or reword every visible and announced string.

Every string the lightbox shows or announces comes from labels. Pass only the ones you want to change. The rest keep their English defaults.

<Lightbox
  labels={{
    dialog: "Visualizador de imagens",
    close: "Fechar",
    previous: "Imagem anterior",
    next: "Imagem seguinte",
    counter: (current, total) => `${current} de ${total}`,
    announcement: (current, total, slide) => `Imagem ${current} de ${total}: ${slide.alt ?? ""}`,
  }}
  {...props}
/>

Open the demo and hover the buttons, or turn on a screen reader, to hear the Portuguese labels.

Live demo. Click a thumbnail to open it.

With next-intl

Build the object from your messages:

const t = useTranslations("lightbox");

const labels = {
  dialog: t("dialog"),
  close: t("close"),
  previous: t("previous"),
  next: t("next"),
  counter: (current: number, total: number) => t("counter", { current, total }),
  announcement: (current: number, total: number) => t("announcement", { current, total }),
};

Keep the object stable with useMemo if your messages object changes identity on every render.

Extending the defaults

defaultLabels is exported, so you can reuse one default inside your own:

import { defaultLabels } from "liftbox";

const labels = {
  announcement: (current: number, total: number, slide: Slide) =>
    `${defaultLabels.announcement(current, total, slide)}. Swipe to browse.`,
};

Every label

KeyDefault
dialogImage viewer
closeClose
previousPrevious image
nextNext image
counter(current, total)3 / 12
announcement(current, total, slide)Image 3 of 12: <title or alt>
thumbnailsThumbnails
thumbnail(index, total, slide)Show image 3
zoomInZoom in
zoomOutZoom out
enterFullscreenEnter fullscreen
exitFullscreenExit fullscreen
loadErrorThis image could not be loaded.
playSlideshowStart slideshow
pauseSlideshowPause slideshow
videoVideo
rotateLeftRotate left
rotateRightRotate right
downloadDownload
downloadErrorThis file could not be downloaded here, so it opened in a new tab.
moreMore options
flipHorizontalFlip horizontally
flipVerticalFlip vertically
shareShare
linkCopiedLink copied
shareErrorThis link could not be shared.
pagerSlides
pagerItem(index, total, slide)Go to image 3

All numbers passed to label functions are 1-based. The full type, with a description of each key:

Prop

Type

Edit this page on GitHub

On this page