- Move i18n initialization to async function - Sync i18n with settings store language - Add Root component for i18n loading state - Convert i18n.js to TypeScript
38 lines
937 B
TypeScript
38 lines
937 B
TypeScript
import i18n from 'i18next'
|
|
import { initReactI18next } from 'react-i18next'
|
|
import { useSettingsStore } from '@/stores/settings'
|
|
|
|
import en from './locales/en.json'
|
|
import zh from './locales/zh.json'
|
|
|
|
// Function to sync i18n with store state
|
|
export const initializeI18n = async (): Promise<typeof i18n> => {
|
|
// Get initial language from store
|
|
const initialLanguage = useSettingsStore.getState().language
|
|
|
|
// Initialize with store language
|
|
await i18n.use(initReactI18next).init({
|
|
resources: {
|
|
en: { translation: en },
|
|
zh: { translation: zh }
|
|
},
|
|
lng: initialLanguage,
|
|
fallbackLng: 'en',
|
|
interpolation: {
|
|
escapeValue: false
|
|
}
|
|
})
|
|
|
|
// Subscribe to language changes
|
|
useSettingsStore.subscribe((state) => {
|
|
const currentLanguage = state.language
|
|
if (i18n.language !== currentLanguage) {
|
|
i18n.changeLanguage(currentLanguage)
|
|
}
|
|
})
|
|
|
|
return i18n
|
|
}
|
|
|
|
export default i18n
|