Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 6x 6x 6x 6x 6x 9x 9x 9x 2x 2x 2x 2x 9x 9x 1x 1x 1x 9x 9x 9x | /**
* @file useLocale.ts
* @description
* Custom hook for managing locale (de/en) with localStorage and i18n synchronization.
* Keeps locale state in sync with i18next language changes.
*
* @enterprise
* - localStorage persistence key: 'i18nextLng'
* - Synchronizes with i18next 'languageChanged' event
* - Normalizes language codes (e.g., 'de-DE' -> 'de', 'en-US' -> 'en')
* - Provides toggle function for language switching
* - Automatic i18n changeLanguage calls
*
* @example
* ```tsx
* const { locale, changeLocale, toggleLocale } = useLocale(i18n);
* ```
*
* @param i18n - i18next instance for language change integration
* @returns Object with locale state, change function, and toggle function
*/
import * as React from 'react';
import type { i18n } from 'i18next';
import type { SupportedLocale } from '../../../theme';
const LS_KEY = 'i18nextLng';
/**
* Normalize i18n language code to SupportedLocale
* Examples: 'de-DE' -> 'de', 'en-US' -> 'en'
*/
const normalize = (lng?: string): SupportedLocale => (lng?.startsWith('en') ? 'en' : 'de');
interface UseLocaleReturn {
/** Current locale */
locale: SupportedLocale;
/** Change locale and trigger i18n language change */
changeLocale: (locale: SupportedLocale) => void;
/** Toggle between de and en */
toggleLocale: () => void;
}
/**
* useLocale hook
* @param i18n - i18next instance
* @returns Locale state and control functions
*/
export const useLocale = (i18n: i18n): UseLocaleReturn => {
const initial = normalize(localStorage.getItem(LS_KEY) || i18n.resolvedLanguage || 'de');
const [locale, setLocaleState] = React.useState<SupportedLocale>(initial);
// Keep locale state in sync with i18n language changes
React.useEffect(() => {
const handler = (lng: string) => setLocaleState(normalize(lng));
i18n.on('languageChanged', handler);
return () => {
i18n.off('languageChanged', handler);
};
}, [i18n]);
const changeLocale = (next: SupportedLocale) => {
localStorage.setItem(LS_KEY, next);
setLocaleState(next);
i18n.changeLanguage(next);
};
const toggleLocale = () => {
const next: SupportedLocale = locale === 'de' ? 'en' : 'de';
changeLocale(next);
};
return { locale, changeLocale, toggleLocale };
};
|