kawkab-frontend
Version:
Kawkab frontend is a frontend library for the Kawkab framework
62 lines (61 loc) • 2.23 kB
JavaScript
import { useTranslation as useOriginalTranslation } from 'react-i18next';
import { useMemo, useState, useEffect, useCallback } from 'react';
import { changeLanguage as changeI18nLanguage, updateDocumentLanguage } from '../utils/i18n';
import { useNavigate, useLocation } from "react-router-dom";
const rtlLanguages = [
'ar', // Arabic
'arc', // Aramaic
'ckb', // Central Kurdish (Sorani)
'dv', // Divehi (Maldivian)
'fa', // Persian (Farsi)
'he', // Hebrew
'ps', // Pashto
'ur', // Urdu
'yi' // Yiddish
];
const getLanguageDirection = (language) => {
return rtlLanguages.includes(language.split('-')[0]) ? 'rtl' : 'ltr';
};
export function useTranslation(ns) {
const { t, i18n } = useOriginalTranslation(ns);
const navigate = useNavigate();
const location = useLocation();
const [currentDir, setCurrentDir] = useState(() => {
return getLanguageDirection(i18n.language);
});
useEffect(() => {
const newDir = getLanguageDirection(i18n.language);
setCurrentDir(newDir);
}, [i18n.language]);
// apply the direction to document and body when the page is loaded for the first time
useEffect(() => {
const dir = getLanguageDirection(i18n.language);
document.dir = dir;
document.body.dir = dir;
}, []);
// changeDir is used to change the direction of the document
const changeLanguage = useCallback((lang, changeDir = true) => {
changeI18nLanguage(lang).then(() => {
if (changeDir) {
updateDocumentLanguage(lang);
}
// reload the page to apply the new language
navigate(location.pathname, { replace: true });
});
}, [navigate, location]);
const memoizedValues = useMemo(() => {
const currentLanguage = i18n.language;
return {
t,
i18n,
changeLanguage,
currentLanguage,
currentDir,
direction: currentDir,
isRTL: currentDir === 'rtl',
isLTR: currentDir === 'ltr',
getLanguageDirection,
};
}, [t, i18n, i18n.language, currentDir, changeLanguage]);
return memoizedValues;
}