Localization

Keep one labels object per language

Store viewer labels next to the rest of your app’s translations and pick the object for the active language. Define each object once (module scope or memoised), because labels are merged per object identity.

import type { PdfViewerLabels } from '@kingtech/react-pdf-viewer';

const VIEWER_LABELS: Record<'en' | 'de', Partial<PdfViewerLabels>> = {
  en: {},
  de: {
    zoomIn: 'Vergrößern',
    zoomOut: 'Verkleinern',
    previousPage: 'Vorherige Seite',
    nextPage: 'Nächste Seite',
    moreActions: 'Weitere Aktionen',
    pageAriaLabel: (page, total, { formatNumber }) =>
      `Seite ${formatNumber(page)} von ${formatNumber(total)}`,
  },
};

<PdfViewer source={url} locale={language} labels={VIEWER_LABELS[language]} />;

The PdfViewerLabels reference lists every key with its English default; translate the accessible names too, not only visible text.

Format numbers with the locale

locale controls how numbers in labels are formatted, including non-Latin digits. Function labels receive formatNumber for exactly this reason. See the live demo on Labels and locale.

Translate error messages

PdfViewerError.message is English. Translate by code in renderError:

const ERRORS: Record<PdfViewerErrorCode, string> = {
  HTTP_ERROR: 'Das Dokument konnte nicht geladen werden.',
  NETWORK_ERROR: 'Keine Verbindung zum Server.',
  // …one entry per code
};

<PdfViewer
  source={url}
  renderError={(error, { retry }) => <ErrorPanel message={ERRORS[error.code]} onRetry={retry} />}
/>;

For HTTP errors your API describes, getHttpErrorMessage can return the server’s localised message; see Authenticated requests.

Right-to-left pages

The viewer works inside right-to-left pages, but its toolbar keeps a left-to-right order. For a mirrored toolbar, render your own with renderToolbar. PDF content is rendered as authored.

Related

• Labels and locale
• Error states
• Accessibility