Localization

Every built-in UI string (close buttons, pagination labels, sort announcements, upload prompts…) resolves through the locale registry. Only en is embedded in the bundle — every other language is loaded from outside (importable module or JSON file) and registered with addLocale. The same registry drives @zephora/react and @zephora/native. en, tr.

Loading a locale

// 1) As a module (tree-shaken, typed):
import { addLocale } from "@zephora/react";
import { trLocale } from "@zephora/theme/locales/tr";
addLocale("tr", trLocale);

// 2) As JSON over the network (e.g. from your CDN):
const messages = await fetch("/locales/tr.json").then((r) => r.json());
addLocale("tr", messages);
// JSON dosyası pakette hazır: @zephora/theme/locales/tr.json

Live demo

Switch the locale — pagination labels and dialog buttons update instantly.

Choosing a locale

// Web
<ZephoraConfigProvider locale="tr">...</ZephoraConfigProvider>

// React Native
<ZephoraProvider theme={lightTheme} locale="tr">...</ZephoraProvider>

Registering a custom locale

addLocale merges your messages over English, so partial definitions are safe. updateLocale patches an existing one.

import { addLocale, updateLocale } from "@zephora/react";

addLocale("de", {
  intlLocale: "de",
  firstDayOfWeek: 1,
  close: "Schließen",
  cancel: "Abbrechen",
  confirm: "Bestätigen",
  loading: "Wird geladen…",
  pageOf: "Seite {page} von {count}",
});

updateLocale("de", { clear: "Leeren" });

Reading strings in your own components

import { useLocale, localeOption } from "@zephora/react";

function SaveBar() {
  const { t } = useLocale();
  return <Button>{t("apply")}</Button>;
}

// Outside React:
localeOption("cancel", "tr"); // "İptal"

Available locales

Ships with 48 ready-made translations. Each is an independent module — import only what you need (or fetch the matching .json).

Message reference

The full key set lives on the ZephoraLocale type — actions (close, cancel, confirm, clear…), data states (loading, noData, emptyMessage), form strings (showPassword, browseFiles, removeFile), navigation (pageOf, nextPage, breadcrumb), data display (sortAscending, selectAllRows, goToSlide) and dates (prevMonth, chooseDate, firstDayOfWeek, intlLocale). Placeholders use the {param} syntax interpolated by t(key, params).