在地化

每個內建的 UI 字串（關閉按鈕、分頁標籤、排序公告、上傳提示…）都會透過語言註冊表解析。bundle 中只內嵌了 en — 其他每種語言都從外部（可匯入的模組或 JSON 檔）載入，並以 addLocale 註冊。同一個註冊表同時驅動 @zephora/react 與 @zephora/native。 en, tr.

載入語言

// 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

即時示範

切換語言 — 分頁標籤與對話框按鈕會即時更新。

選擇語言

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

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

註冊自訂語言

addLocale 會將你的訊息合併於英文之上，因此部分定義也很安全。updateLocale 則會修補既有的語言。

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" });

在你自己的元件中讀取字串

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

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

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

可用語言

內建 48 種現成翻譯。每一種都是獨立的模組 — 只匯入你需要的部分（或抓取對應的 .json）。

訊息參考

完整的 key 集合位於 ZephoraLocale 型別上 — 動作（close、cancel、confirm、clear…）、資料狀態（loading、noData、emptyMessage）、表單字串（showPassword、browseFiles、removeFile）、導覽（pageOf、nextPage、breadcrumb）、資料顯示（sortAscending、selectAllRows、goToSlide）與日期（prevMonth、chooseDate、firstDayOfWeek、intlLocale）。佔位符使用由 t(key, params) 進行插值的 {param} 語法。