28 lines
1.3 KiB
TypeScript
28 lines
1.3 KiB
TypeScript
import { useEffect, type ReactNode } from 'react';
|
|
import { I18nProvider } from 'react-aria-components';
|
|
|
|
import { localeOf, useLanguage } from '../i18n/language';
|
|
|
|
/**
|
|
* The language of the INTERFACE, applied to the primitives library.
|
|
*
|
|
* The service strings of the primitives — scroll hints, "clear the field" — come from the library
|
|
* and would otherwise take the language of the BROWSER: English in the middle of a Russian
|
|
* interface on someone else's machine. The choice itself lives in `src/i18n/language.ts`, next to
|
|
* the catalogue that answers to it; the language of the translated PAIR has nothing to do with this
|
|
* one and lives in the data of the book.
|
|
*/
|
|
export function Locale({ children }: { children: ReactNode }) {
|
|
const language = useLanguage((state) => state.language);
|
|
const locale = localeOf(language);
|
|
|
|
// The `lang` of the document follows the choice too. Otherwise the one thing a second language
|
|
// could not change would be the attribute a screen reader picks its voice by — and index.html,
|
|
// which is not a component, would quietly make the claim "a language is added without touching a
|
|
// component" false.
|
|
useEffect(() => {
|
|
document.documentElement.lang = locale;
|
|
}, [locale]);
|
|
|
|
return <I18nProvider locale={locale}>{children}</I18nProvider>;
|
|
}
|