32 lines
910 B
TypeScript
32 lines
910 B
TypeScript
import { useLayoutEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
/**
|
|
* This component listens to i18next language changes and applies
|
|
* side effects to the document. It renders no visible UI.
|
|
*/
|
|
export const LanguageManager = () => {
|
|
const { i18n, t } = useTranslation();
|
|
|
|
useLayoutEffect(() => {
|
|
const handleLanguageChange = (lng: string) => {
|
|
document.documentElement.setAttribute('dir', i18n.dir(lng));
|
|
document.documentElement.setAttribute('lang', lng);
|
|
document.title = t('app.title', { lng });
|
|
};
|
|
|
|
// Set initial values on component mount
|
|
handleLanguageChange(i18n.language);
|
|
|
|
// Listen for future language changes
|
|
i18n.on('languageChanged', handleLanguageChange);
|
|
|
|
// Cleanup the event listener on unmount
|
|
return () => {
|
|
i18n.off('languageChanged', handleLanguageChange);
|
|
};
|
|
}, [i18n, t]);
|
|
|
|
return null;
|
|
};
|