Files
checkcle/application/src/contexts/LanguageContext.tsx
T
2025-05-26 20:32:08 +08:00

48 lines
1.5 KiB
TypeScript

import React, { createContext, useContext, useState, ReactNode } from "react";
import { translations, Language, TranslationModule, TranslationKey } from "@/translations";
type LanguageContextType = {
language: Language;
setLanguage: (language: Language) => void;
t: <M extends TranslationModule>(key: string, module?: M) => string;
};
// ❗ Create the context with `undefined` to enforce provider usage
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
// ✅ Stable custom hook
export const useLanguage = () => {
const context = useContext(LanguageContext);
if (!context) {
throw new Error("useLanguage must be used within a LanguageProvider");
}
return context;
};
export const LanguageProvider = ({ children }: { children: ReactNode }) => {
const [language, setLanguage] = useState<Language>("en");
const t = <M extends TranslationModule>(key: string, module?: M): string => {
if (module) {
const translatedValue = translations[language][module][key as TranslationKey<M>];
return typeof translatedValue === "string" ? translatedValue : key;
}
for (const mod in translations[language]) {
const moduleKey = mod as TranslationModule;
const translatedValue = translations[language][moduleKey][key as any];
if (translatedValue && typeof translatedValue === "string") {
return translatedValue;
}
}
return key;
};
return (
<LanguageContext.Provider value={{ language, setLanguage, t }}>
{children}
</LanguageContext.Provider>
);
};