🌎Internationalization

DSFR components contain hard coded strings.

These strings can be switched from a langage to another with a provider.

When lang="en"
When lang="fr"

Integration with i18n libraries

A type safe internationalisation library for SPAs and Next.js
import { useLang } from "i18n";

startDsfrReact({ 
  defaultColorScheme: "system",
  useLang: function useLangDsfr() {
        const { lang } = useLang();
        return lang;
  }
});

Example setup in Next.js / In a SPA.

Adding translations or overwriting default text

The components usually come with one or two translations by default, typically english (en), spanish (es) and sometime german (de). Illustration with the <DarkModeSwitch /> component.

You can add translation for extra language on a component basis, like so:

import { addAlertTranslations } from "@codegouvfr/react-dsfr/Alert";

addAlertTranslations({
    lang: "zh-CN",
    messages: {
        hide message: "ιšθ—ζΆˆζ―"
    }
});

The above code adds chinese (zh-CN) support for the Alert component. You can call addAlertTranslations() wherever, just be sure it's evaluated before the first use of the component, here <Alert />.

You can also use this approach for overwiting the default text. Example:

import { addDisplayTranslations } from "@codegouvfr/react-dsfr/Display";

addDisplayTranslations({
	lang: "fr",
	messages: {
		"dark theme": "Thème sombre 🀩",
	}
});
It goes without saying this is not a recommended customization of the Display Modal

With Next App Router

When utilizing Next in App Router mode, it's crucial to accurately add or overwrite translations at the proper location.

For components that you use as server components, such as <Header />, <Footer />, or the <Display /> modal, you should make calls to addXxxTranslation within app/layout.tsx.

For components used as client components, and those explicitly marked as client components like <Alert /> or <Tabs />, addXxxTranslation should be conducted in app/StartDsfr.tsx.

Last updated

Was this helpful?