Localization

Casper UI components that display translated text or locale-formatted dates read their locale from the nearest ThemeProvider. Set it once, at the top of your app, via ThemeProvider’s locale prop:

import { ThemeProvider } from "@caspeco/casper-ui-library";

return (
  <ThemeProvider locale="sv-SE">{/* Your app consuming Casper UI components goes here */}</ThemeProvider>
);

It defaults to en-US when omitted.

Supported locales

See AppLocale for the supported locales. Components fall back to English for any other locale.

Using a different locale for part of a page

Wrap that part in a LocaleProvider:

import { LocaleProvider, ThemeProvider } from "@caspeco/casper-ui-library";

return (
  <ThemeProvider locale="sv-SE">
    <SwedishContent />
    <LocaleProvider locale="fr-FR">
      <FrenchContent />
    </LocaleProvider>
  </ThemeProvider>
);

Reading the current locale

Use the useLocale hook to read the locale provided by the nearest ThemeProvider, for example to localize text of your own alongside Casper UI components:

import { useLocale } from "@caspeco/casper-ui-library";

function MyComponent() {
  const locale = useLocale();
  return <p>Current locale: {locale}</p>;
}