33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { ReactNode, useState, useEffect } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { LanguageContext, Language } from './LanguageContextValue'
|
|
|
|
export function LanguageProvider({ children }: { children: ReactNode }) {
|
|
const { i18n } = useTranslation()
|
|
const [language, setLanguageState] = useState<Language>(() => {
|
|
const saved = localStorage.getItem('charon-language')
|
|
return (saved as Language) || 'en'
|
|
})
|
|
|
|
useEffect(() => {
|
|
i18n.changeLanguage(language)
|
|
}, [language, i18n])
|
|
|
|
const setLanguage = (lang: Language) => {
|
|
setLanguageState(lang)
|
|
localStorage.setItem('charon-language', lang)
|
|
i18n.changeLanguage(lang)
|
|
// Set document direction for RTL languages
|
|
// Currently only LTR languages are supported (en, es, fr, de, zh)
|
|
// When adding RTL languages (ar, he), update the Language type and this check:
|
|
// document.documentElement.dir = ['ar', 'he'].includes(lang) ? 'rtl' : 'ltr'
|
|
document.documentElement.dir = 'ltr'
|
|
}
|
|
|
|
return (
|
|
<LanguageContext.Provider value={{ language, setLanguage }}>
|
|
{children}
|
|
</LanguageContext.Provider>
|
|
)
|
|
}
|