feat: add runtime language selector in header (EN/FR toggle)
- 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
This commit is contained in:
16
src/hooks/useLocale.ts
Normal file
16
src/hooks/useLocale.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user