9b3aed4adc
- Add LanguageSelector component with globe icon + cycle button - Refactor i18n to support reactive locale switching via useSyncExternalStore - Locale priority: localStorage > VITE_LOCALE > navigator.language > 'en' - All components now use useT() hook for reactive re-rendering on locale change - Persists choice to localStorage (key: pinchchat-locale) - No page reload needed — instant switch
17 lines
557 B
TypeScript
17 lines
557 B
TypeScript
import { useSyncExternalStore } from 'react';
|
|
import { getLocale, onLocaleChange, t as rawT, type TranslationKey } from '../lib/i18n';
|
|
|
|
/** Re-renders component when locale changes. Returns the current locale string. */
|
|
export function useLocale(): string {
|
|
return useSyncExternalStore(onLocaleChange, getLocale, getLocale);
|
|
}
|
|
|
|
/**
|
|
* Reactive translation hook.
|
|
* Components using this will automatically re-render when locale changes.
|
|
*/
|
|
export function useT(): (key: TranslationKey) => string {
|
|
useLocale(); // subscribe to changes
|
|
return rawT;
|
|
}
|