When to use
- Authenticated plugin pages that can read setting.locale
- Prefer over sync useLocaleTranslation for new work
- For public / pre-login screens use usePublicLazyLocaleTranslation instead
Signature
Pass a LazyLocaleType map of dynamic JSON imports. The hook returns translation helpers plus loading state.
TSsignature
1function useLazyLocaleTranslation(
2 locales: LazyLocaleType,
3): {
4 translation: {
5 get: (key: string, fallback?: string, data?: Record<string, unknown>) => string;
6 };
7 isLoading: boolean;
8 // …
9};Usage
Colocate locales/*.json and a LazyLocaleType map, then call get() for every visible string.
TSXbranch.locale.ts
1import type { LazyLocaleType } from "@quan-erp/shared-ui";
2
3export const BranchLocaleLazy: LazyLocaleType = {
4 "en-US": () => import("./locales/en-US.json"),
5 "my-MM": () => import("./locales/my-MM.json"),
6 "zh-CN": () => import("./locales/zh-CN.json"),
7};TSXbranch.page.tsx
1import { useLazyLocaleTranslation } from "@quan-erp/shared-ui";
2import { BranchLocaleLazy } from "./branch.locale";
3
4export function BranchPage() {
5 const { translation, isLoading } = useLazyLocaleTranslation(
6 BranchLocaleLazy,
7 );
8
9 if (isLoading) return null;
10
11 return (
12 <h1>{translation.get("branches", "Branches")}</h1>
13 );
14}Notes
- See Documentation → Frontend → Core → Localization for file layout and interpolation
- Do not hardcode user-visible English outside translation.get()
- Sync useLocaleTranslation remains for tiny legacy dictionaries only