51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react';
|
|
import type { Language, Translation } from '@/types/i18n';
|
|
import { translations, defaultLanguage } from '@/lib/data/translations';
|
|
|
|
export const useTranslation = () => {
|
|
// Initialize on server with default language to avoid using localStorage during SSR
|
|
const [currentLanguage, setCurrentLanguage] = useState<Language>(defaultLanguage);
|
|
|
|
// On client, read saved language from localStorage
|
|
useEffect(() => {
|
|
try {
|
|
const saved = (typeof window !== 'undefined' && localStorage.getItem('language')) as Language | null;
|
|
if (saved && translations[saved]) {
|
|
setCurrentLanguage(saved);
|
|
}
|
|
} catch (e) {
|
|
// ignore (e.g., localStorage not available)
|
|
}
|
|
}, []);
|
|
|
|
// Persist language changes on client
|
|
useEffect(() => {
|
|
try {
|
|
if (typeof window !== 'undefined') {
|
|
localStorage.setItem('language', currentLanguage);
|
|
}
|
|
} catch (e) {
|
|
// ignore
|
|
}
|
|
}, [currentLanguage]);
|
|
|
|
// Memoize the translation object to prevent unnecessary re-renders
|
|
const t = useMemo<Translation>(() => translations[currentLanguage], [currentLanguage]);
|
|
|
|
// Memoize available languages array
|
|
const availableLanguages = useMemo(() => Object.keys(translations) as Language[], []);
|
|
|
|
const changeLanguage = (language: Language) => {
|
|
if (translations[language]) {
|
|
setCurrentLanguage(language);
|
|
}
|
|
};
|
|
|
|
return {
|
|
t,
|
|
currentLanguage,
|
|
changeLanguage,
|
|
availableLanguages,
|
|
};
|
|
};
|