56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import React, { createContext, useState, useContext, useEffect } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
type LanguageContextType = {
|
||
currentLanguage: string;
|
||
changeLanguage: (lang: string) => void;
|
||
};
|
||
|
||
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
|
||
|
||
export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||
const { i18n } = useTranslation();
|
||
// 从localStorage获取保存的语言设置，如果没有则使用当前语言或默认为'en'
|
||
const savedLanguage = localStorage.getItem('i18nextLng') || i18n.language || 'en';
|
||
const [currentLanguage, setCurrentLanguage] = useState(savedLanguage);
|
||
|
||
const changeLanguage = (lang: string) => {
|
||
i18n.changeLanguage(lang);
|
||
// 将语言设置保存到localStorage
|
||
localStorage.setItem('i18nextLng', lang);
|
||
};
|
||
|
||
useEffect(() => {
|
||
// 确保初始化时使用正确的语言
|
||
if (savedLanguage && i18n.language !== savedLanguage) {
|
||
i18n.changeLanguage(savedLanguage);
|
||
}
|
||
|
||
const handleLanguageChanged = () => {
|
||
setCurrentLanguage(i18n.language);
|
||
// 将更改后的语言保存到localStorage
|
||
localStorage.setItem('i18nextLng', i18n.language);
|
||
};
|
||
|
||
i18n.on('languageChanged', handleLanguageChanged);
|
||
|
||
return () => {
|
||
i18n.off('languageChanged', handleLanguageChanged);
|
||
};
|
||
}, [i18n, savedLanguage]);
|
||
|
||
return (
|
||
<LanguageContext.Provider value={{ currentLanguage, changeLanguage }}>
|
||
{children}
|
||
</LanguageContext.Provider>
|
||
);
|
||
};
|
||
|
||
export const useLanguage = (): LanguageContextType => {
|
||
const context = useContext(LanguageContext);
|
||
if (context === undefined) {
|
||
throw new Error('useLanguage must be used within a LanguageProvider');
|
||
}
|
||
return context;
|
||
};
|