i18n

Clover ships its own i18next instance so you can localize the UI without wiring anything else. To reduce Clover's bundle size, translations are not loaded automatically. Call initCloverI18n() once near your app entry point, then render any Clover component.

Default Locale (English)

If you never call initCloverI18n, Clover defaults to English (en) and uses the bundled translations from src/i18n/locales/en.json.

src/app.tsx

import Viewer from "@samvera/clover-iiif/viewer";
 
<Viewer iiifContent={manifestId} />;

Defined Locales

Clover has defined locales (e.g., Portuguese, Norwegian variants) contributed by the community. These are available out of the box. Initialize Clover with the locale you need before rendering components.

Example: Portuguese

src/app.tsx

import Viewer from "@samvera/clover-iiif/viewer";
import { initCloverI18n } from "@samvera/clover-iiif/i18n";
 
const manifestId =
  "https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275?as=iiif";
 
initCloverI18n({
  lng: "pt",
  fallbackLng: ["pt", "en"],
});
 
export function App() {
  return <Viewer iiifContent={manifestId} />;
}

Example: Norwegian variants

src/main.tsx

import Viewer from "@samvera/clover-iiif/viewer";
import { initCloverI18n } from "@samvera/clover-iiif/i18n";
 
const manifestId =
  "https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275?as=iiif";
 
initCloverI18n({
  lng: "nb", // or "nn" / "no"
  fallbackLng: ["nb", "no", "en"],
});
 
export function App() {
  return <Viewer iiifContent={manifestId} />;
}

Bootstrapping Undefined Locales

Need a locale Clover does not ship yet? Provide overrides when calling initCloverI18n. The helper merges your strings and activates the language.

Example: German

src/main.tsx

import Viewer from "@samvera/clover-iiif/viewer";
import { initCloverI18n } from "@samvera/clover-iiif/i18n";
 
const manifestId =
  "https://api.dc.library.northwestern.edu/api/v2/works/99762c53-8a99-44d4-b7d8-2ebbc2bb274f?as=iiif";
 
initCloverI18n({
  lng: "de",
  fallbackLng: ["de", "en"],
  resources: {
    de: {
      clover: {
        commonClose: "Schließen",
        commonNext: "Weiter",
        informationPanelTabsAbout: "Über",
        // ...override or add any keys you need
      },
    },
  },
});
 
export function App() {
  return <Viewer iiifContent={manifestId} />;
}

Contributing Additional Locales

We love translations. Follow these steps to add a locale to Clover itself.

Fork samvera-labs/clover-iiif (opens in a new tab) and create a branch.
Add a new src/i18n/locales/<bcp47>.json file (for example fr.json). Use en.json as a template and translate each value.
Import the file in src/i18n/locales/index.ts and include it in the default export.
Open a pull request.

Adding a language file

src/i18n/locales/fr.json

{
  "commonClose": "Fermer",
  "commonNext": "Suivant",
  "commonPrevious": "Précédent",
  "commonSearch": "Rechercher",
  "commonSearchPlaceholder": "Rechercher...",
  "commonShare": "Partager",
  "commonViewAll": "Voir tout"
}

src/i18n/locales/index.ts

import en from "./en.json";
import fr from "./fr.json";
 
export default {
  en,
  fr,
};

Language + region subtags

For region-specific variants (for example Canadian French), name the file fr-CA.json, import it, and add it using the canonical key:

src/i18n/locales/index.ts

import en from "./en.json";
import fr from "./fr.json";
import frCA from "./fr-CA.json";
 
export default {
  en,
  fr,
  "fr-CA": frCA,
};

Once merged, the new locale becomes part of the “Defined Locales” list and can be selected through initCloverI18n like the others.

Thumbnail