); } augmentDocumentForDsfr(Document); ``` {% endcode %} {% endtab %} {% tab title="Create React App" %} {% hint style="warning" %} The create-react-app project is no longer being maintained. If you are starting a new project you'll probably be beter off with Vite. {% endhint %} {% embed url="" %} See demo setup in production here: {% endembed %} Add these three scripts to your `package.json`:

"scripts": {
    ...
    "postinstall": "react-dsfr copy-static-assets",
    "predev": "react-dsfr update-icons",
    "prebuild": "react-dsfr update-icons"
},
...
"jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!@codegouvfr/react-dsfr)"
    ]
}

Trigger the execution of the postinstall script by running: ```bash yarn # Or 'npm install' or 'pnpm install' ``` Add the following code in the `` {% code title="public/index.html" %} ```ejs ``` {% endcode %}

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
startReactDsfr({ defaultColorScheme: "system" });

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

You're all set! Next step for you is to setup de integration with your routing library (react-router for example) {% content-ref url="/pages/87BiqajHbI0WtezSVwJM" %} [Integration with routing libs](/routing) {% endcontent-ref %} {% endtab %} {% tab title="Other" %} Your framework isn't supported? Let's [get in touch](https://github.com/codegouvfr/dsfr-react)! \ \ Note: We don't have a custom integration for it but react-dsfr has been reported working with [Gatsby](https://www.gatsbyjs.com/).
{% embed url="" %} {% endtab %} {% endtabs %} ### Avoiding or flash of unstyled text (FOUT) You can avoid having a flash of unstyled text by preloading the font variant used on your homepage (look in the network tab of your browser dev tools what are the font downloaded initially). {% tabs %} {% tab title="Vite" %} Add the following tags in the `` {% code title="index.html" %} ```html ``` {% endcode %} {% endtab %} {% tab title="Next.js App Router" %}

import { getHtmlAttributes, DsfrHead } from "../dsfr-bootstrap/server-only-index";
import { DsfrProvider } from "../dsfr-bootstrap";

export default function RootLayout({ children }: { children: React.JSX.Element; }) {
  const lang = undefined; // Can be "fr" or "en" ...
  return (
    <html {...getHtmlAttributes({ lang })} >
      <head>
        <DsfrHead 
          preloadFonts={[
	    //"Marianne-Light",
            //"Marianne-Light_Italic",
	    "Marianne-Regular",
	    //"Marianne-Regular_Italic",
	    "Marianne-Medium",
	    //"Marianne-Medium_Italic",
	    "Marianne-Bold"
	    //"Marianne-Bold_Italic",
	    //"Spectral-Regular",
	    //"Spectral-ExtraBold"
	  ]}
        />
      </head>
      <body>
        <DsfrProvider lang={lang}>
          {children}
        </DsfrProvider>
      </body>
    </html>
  );
}

{% endtab %} {% tab title="Next.js Pages Router" %}

import type { AppProps } from "next/app";
import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next-pagesdir";
import Link from "next/link";

// Only in TypeScript projects
declare module "@codegouvfr/react-dsfr/next-pagesdir" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

const { 
    withDsfr,
    dsfrDocumentApi
} = createNextDsfrIntegrationApi({
    defaultColorScheme: "system",
    Link,
    preloadFonts: [
  	//"Marianne-Light",
        //"Marianne-Light_Italic",
	"Marianne-Regular",
	//"Marianne-Regular_Italic",
	"Marianne-Medium",
	//"Marianne-Medium_Italic",
	"Marianne-Bold",
	//"Marianne-Bold_Italic",
	//"Spectral-Regular",
	//"Spectral-ExtraBold"
    ]
});

export { dsfrDocumentApi };

function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
}

export default withDsfr(App);

); } ``` Which is in turn equivalent to: ```tsx import { fr } from "@codegouvfr/react-dsfr"; function MyComponent() { return (

); } ```

You can read the returned value in em just by hovering the spacing function call

### breakpoints For writing responsive UIs with media query (`@media`). {% hint style="info" %} This tool is build using [this file](https://unpkg.com/browse/@codegouvfr/react-dsfr/src/fr/generatedFromCss/breakpoints.ts) that is automatically generated from [dsfr.css](https://unpkg.com/browse/@gouvfr/dsfr/dist/dsfr/dsfr.css) {% endhint %} ```tsx import { useStyles } from "tss-react"; import { fr } from "@codegouvfr/react-dsfr"; function MyComponent() { const { css, theme } = useStyles(); return (

); } ```

This tool generates @media query for you that matches the DSFR breakpoints

### colors Using the `theme` object that holds the colors decisions and options. {% hint style="success" %} 📣📣📣📣📣📣\ There is [a tool](https://components.react-dsfr.codegouv.studio/?path=/docs/%F0%9F%8E%A8-color-helper--page) at your disposal to help you pick your colors.\ Use it! It's great!\ 📣📣📣📣📣📣📣 {% endhint %} #### Using CSS variables (recommended) This approad is React agnostic and yield the best performances.

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

function MyComponent(){

  return (
    <div style={{
      // The recommended method, using CSS variables: 
      backgroundColor: fr.colors.decisions.background.default.grey.default 
      // This is: backgroundColor: "var(--background-default-grey)"
    }} />
  );

}

#### Using HEX color code Some third party libraries might require you to provide explicit value as colors. When CSS variable references doesn't work you can do:

import { fr } from "@codegouvfr/react-dsfr";
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";

function MyComponent(){

  const { isDark } = useIsDark();

  return (
    <div style={{
      backgroundColor: fr.colors.getHex({ isDark }).decisionsbackground.default.grey.default
      // This is backgroundColor: "#161616" when isDark is true
      // and     backgroundColor: "#ffffff" when isDark is false
    }} />
  );

}

### useIsDark() You can access the active mode (isDark: true/false) in the `theme` object. However, if you want to manually switch the mode, you can use `setIsDark(true/false)` . {% hint style="info" %} Consider using the [\](https://components.react-dsfr.codegouv.studio/?path=/docs/components-display--default) component instead of trying to manually manage the active mode. {% endhint %} ```tsx import { useIsDark, getIsDark // Let you access the current value of isDark outside of React (client side only) } from "@codegouvfr/react-dsfr/useIsDark"; function MyComponent(){ const { isDark, setIsDark } = useIsDark(); //isDark is a boolean that is true if the App is currently in dark mode. //Calling setIsDark(true) will switch the app in dark mode. //calling setIsDark("system") will set to whatever mode is signaled as prefered //by the user browser } ``` If you want to use the isDark value in your styles:

import { tss } from "tss-react";
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";

function MyComponent(props){

    const { className } = props;
    
    const { isDark } = useIsDark();
    const { classes, cx } = useStyles({ isDark });
    
    return (
        <div classNames={cx(classes.root, className)}>
           // ...
        </div>
    );
    
}

const useStyles = tss
  .withParams<{ isDark: boolean; }>()
  .create(({ isDark })=> ({
    root: { /* ... */ }
  }));

### useBreakpointsValuesPx() It returns the values in pixel of the different breakpoint ("xs", "md", "lg", "xl") based on the current root font size. It can be used to do stuffs like this, geting the number of column of a responsive layout in JavaScript: ```tsx import { useBreakpointsValuesPx } from "@codegouvfr/react-dsfr/useBreakpointsValuesPx"; import { useWindowInnerSize } from "@codegouvfr/react-dsfr/tools/useWindowInnerSize"; function useColumnCount(){ const { breakpointsValues } = useBreakpointsValuesPx(); const { windowInnerWidth } = useWindowInnerSize(); const columnCount = (() => { if (windowInnerWidth < breakpointsValues.md) { return 1; } if (windowInnerWidth < breakpointsValues.xl) { return 2; } return 3; })(); return collumnCount; } ``` {% hint style="warning" %} Be carefull though, favor using `fr.breakpoints` over client size mesurement and computation. On the backend you can't know ahead of time the size of the screen of your users so this kind of approach will result in a flickering in SSR setups. For example, your backend has no clue the size of the device making the request so it renders for a 1080p screen but the device making the request was, in fact, an iPhone and the first print is fully broken, the app becomes usable only after hydration. Long story short, use this only if you are building an SPA. {% endhint %} # Internationalization DSFR components contain hard coded strings. These strings can be switched from a langage to another with a provider. ![When lang="en"](https://user-images.githubusercontent.com/6702424/202221151-9e04dd77-da52-4ce7-b1b1-5bb653addf50.png) ![When lang="fr"](https://user-images.githubusercontent.com/6702424/202221309-b11b89a7-4893-442b-ab2a-92f85177ba69.png) Integration with i18n libraries {% tabs %} {% tab title="i18nifty" %} {% embed url="" %} A type safe internationalisation library for SPAs and Next.js {% endembed %} ```tsx import { useLang } from "i18n"; startDsfrReact({ defaultColorScheme: "system", useLang: function useLangDsfr() { const { lang } = useLang(); return lang; } }); ``` Example setup [in Next.js](https://github.com/etalab/etalab-website/blob/b427049dd9609ddbdd5fc2b42484d700e20851f4/pages/_app.tsx#L39-L42) / In a SPA. {% hint style="warning" %} DISCLAMER: I'm the author of i18nifty. While I can confidently recommend it for SPAs, I have to warn you that using i18nifty in Next.js will force you to opt out from[ Automatic Static Optimization](https://nextjs.org/docs/messages/opt-out-auto-static-optimization) and bundle all your translations in the JavaScript bundle. SSR, SSO will work fine though. {% endhint %} {% endtab %} {% tab title="Next.js i18n App Router" %} {% embed url="" %} At the bottom you have setup examples {% endembed %} Assuming you have configured Next so that you have a lang prop provided to you in the main layout:

import { i18n } from '../../i18n-config'

export async function generateStaticParams() {
  	return i18n.locales.map((locale) => ({ lang: locale }))
}

export default function Root({
  children,
  params,
}: {
  children: React.ReactNode
  params: { lang: string }
}) {
	const { lang } = params;
	return (
		<html
			{...getHtmlAttributes({ defaultColorScheme, lang })}
		>
			<head>
			{/*...*/}
			</head>
			<body>
				<DsfrProvider lang={lang}>
					{/*...*/}
				</DsfrProvider>
			</body>
		</html>
	);
}

{% endtab %} {% tab title="Next.js i18n Page Router" %} {% embed url="" %} Assuming you have enabled internationalized routing:

import { useRouter } from "next/router";

const { withDsfr, dsfrDocumentApi } = createNextDsfrIntegrationApi({
	"defaultColorScheme": "system",
	Link,
	useLang: () => {
		const { locale = "fr" } = useRouter();
		return locale;
	}
});

{% endtab %} {% tab title="Other i18n library" %} It's up to you to replace in the following example `"fr"` by the desired locale using to tooling exposed by your i18n library. ```tsx startDsfrReact({ defaultColorScheme: "system", useLang: () => "fr" }); ``` {% endtab %} {% endtabs %} ### 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 \ component](https://github.com/codegouvfr/react-dsfr/blob/e8b78dd5ad069a322fbcc34b34b25d4ac8214e34/src/DarkModeSwitch.tsx#L162-L199). You can add translation for extra language on a component basis, like so: ```tsx 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 ``. You can also use this approach for overwiting the default text. Example: ```tsx 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 `

`, `

`, or the `` 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 [``](https://github.com/codegouvfr/react-dsfr/blob/5d912eb7295e03d010a148c46798909e53ba9261/src/Alert.tsx#L1) or [``](https://github.com/codegouvfr/react-dsfr/blob/main/src/Tabs.tsx#L1), `addXxxTranslation` should be conducted in `app/StartDsfr.tsx`. # Importing assets How to import images, SVGs and other static DSFR resources Let's say, [in the DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage), you come across the following HTML code. ```html ``` Let's see how we would translate this into React. {% tabs %} {% tab title="Create React App / Vite / Others" %} Most JS bundlers, by default, emits a separate file and exports the URL when comming across an import of a image or video file format. ```tsx import artworkDarkSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg"; ``` {% endtab %} {% tab title="Next.js" %} In modern Next, if not explicitly disabled, image files (including SVGs) are imported using [next/image](https://nextjs.org/docs/upgrading#nextconfigjs-customization-to-import-images). You'll get a valid url by accessing the src property of the react component. ```tsx import ArtworkDarkSvg from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg"; ; ``` {% endtab %} {% endtabs %} # MUI integration Use MUI components in your App or DSFRify your website build with MUI. {% embed url="" %} react-dsfr features a DSFR theme for MUI. This enables you to use the [large library of MUI components](https://mui.com/) in your website, they will blend in nicely. First of all you'll have to remove all usage of `` and `createTheme()` from your codebase (if any) then implement the following approach: ```tsx import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui"; function App() { return ( {/* your app ... */} ); } ```

Custom variable in MUI theme

If you have [custom variables](https://mui.com/material-ui/customization/theming/#custom-variables) in your MUI theme implement the following approach. In this example we have augmented the MUI theme so it was possible to call `theme.custom.isDarkModeEnabled`. ```tsx import { createMuiDsfrThemeProvider } from "@codegouvfr/react-dsfr/mui"; // eslint-disable-next-line @typescript-eslint/no-unused-vars import type { Theme } from "@mui/material/styles"; declare module "@mui/material/styles" { interface Theme { custom: { isDarkModeEnabled: boolean; } } } const { MuiDsfrThemeProvider } = createMuiDsfrThemeProvider({ "augmentMuiTheme": ({ nonAugmentedMuiTheme, frColorTheme }) => ({ ...nonAugmentedMuiTheme, "custom": { "isDarkModeEnabled": frColorTheme.isDark } }) }); function App() { return ( {/* your app ... */} ); } ```

The demo setups for Vite, Next ans create-react-app all commes with MUI already setup.\ \ You can find aditional informations about this tool here: {% embed url="" %} ### Next.js: Improving first print In Next.js setup, on initial page load you may experience a few frames where MUI components aren't aware that the dark mode is enabled.

After idratation it switches to dark mode

You can eradicate these few frames on subsequent page load by telling Next.js to perform SSR in the correct color scheme for the user:

const { withDsfr, dsfrDocumentApi } = createNextDsfrIntegrationApi({
  defaultColorScheme: 'system',
  doPersistDarkModePreferenceWithCookie: true
});

**Be aware**: this will opt you out[ from Automatic Static Optimization](https://nextjs.org/docs/messages/opt-out-auto-static-optimization), every hit of your website will trigger a complete render on the backend, so **it probably isn't worth it** unless you have already opted out from static optimization. ### Setting up Next.js + MUI + react-dsfr {% hint style="warning" %} Be aware that the API have changed since this video was recorded. {% endhint %} {% embed url="" %} All demo setup are preconfigured with MUI installed.\ \\ # Custom Branding Remove the governmental branding and apply your own theme. By default, applications built with this toolkit must be deployed on a \`.gouv.fr\` domain. Using the DSFR outside that context requires an official agreement. But what if you want to open your app to other use cases? **React-DSFR** allows you to white-label your application, and even apply a custom MUI theme dynamically, simply by changing a configuration value. Here’s a video tutorial that shows how to leverage this feature: {% embed url="" %} You can find the template project used in the tutorial here: {% embed url="" %} **Bonus tip:** If you want to change the environment variable that defines the active theme \*\*without rebuilding\*\* (in Vite projects), you’ll find this tool very useful: {% embed url="" %} # Storybook Setting up Storybook in your react-dsfr project. Storybook is an open-source tool for developing and testing UI components in isolation, allowing you to create and refine components independently from the app's business logic. For example [the components website of react-dsfr](https://components.react-dsfr.codegouv.studio/?path=/story/%F0%9F%87%AB%F0%9F%87%B7-introduction--page) is powered by Storybook. \ \ Let's see how to setup Storybook 8 in your project.

The storybook of Lunatic-DSFR (INSEE, https://github.com/InseeFr/Lunatic-DSFR)

## Minimal setup If you use Storybook as an internal devloppement tool only. You don't need to customize much. First follow the official instruction to setup Storybook in your meta framework of choice: {% embed url="" %} Here are the edit you need to apply to the default setup:

{
    // ...
    "scripts": {
        // ...
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build",
        "prestorybook": "react-dsfr update-icons",
        "prebuild-storybook": "react-dsfr update-icons"
    }
}

import type { Preview } from "@storybook/react";
import "@codegouvfr/react-dsfr/main.css";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";

startReactDsfr({
    "defaultColorScheme": "system",
    "useLang": () => "fr",
});


const preview: Preview = {
    parameters: {
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i
            }
        }
    }
};

export default preview;

## Bells and whistles If you wish to publish your storybook as component library showecase you might want to go the extra miles and customize the Manager to add top level darkMode switch, load the Marianne font, provide a language switch ect. If you want a fully DSFRised Storybook setup you can use this setup as reference: {% embed url="" %} You can see it live here: {% endembed %} Don't forget to add this extra dependency: {% tabs %} {% tab title="npm" %} ```bash npm install --save-dev storybook-dark-mode ``` {% endtab %} {% tab title="yarn" %} ```bash yarn add --dev storybook-dark-mode ``` {% endtab %} {% tab title="pnpm" %} ```bash pnpm add -D storybook-dark-mode ``` {% endtab %} {% tab title="bun" %} ```bash bun add --dev storybook-dark-mode ``` {% endtab %} {% endtabs %} Lastly apply the following reference `.storybook` directory in your setup. Be sure to carefully merge the `.storybook/main.ts` so you don't overwrite specific configuration required by your meta framework. # Analytics Track your audience engagement and gain insights into how citizens interact with your website. {% hint style="warning" %} Message from the @gouvfr/dsfr team: La propriété de configuration `enableRating`, présente depuis la @gouvfr/dsfr:1.9.2, entraîne des envois de données très importants. Pour rappel, le modèle de facturation dépend du volume d'appels envoyés à Eulerian. Elle est retirée dans cette version @gouvfr/dsfr:1.10.2 (bundled with @codegouvfr/react-dsfr:[0.78.2](https://github.com/codegouvfr/react-dsfr/releases/tag/v0.78.2)). En remplacement, un attribut `data-fr-analytics-rating` peut être ajouté sur un élément dont on veut mesurer spécifiquement le taux de click. Il est important de s'assurer de la pertinence de chaque élément où cette fonctionnalité est activée afin d'optimiser l'envoi de données. {% endhint %} In the realm of analytics, the Service d'Information du Gouvernement (SIG) stipulates the utilization of [Eulerian](https://www.eulerian.com/). The vanilla JS/CSS module @gouvfr/dsfr, which powers this toolkit, is deeply integrated with the Eulerian platform. Activating it equips you with the capabilities to accurately track user interactions with your application, including specific buttons they click and pages they navigate. To comply with GDPR regulations, it's crucial to request user consent before implementing this detailed level of tracking. Presented here is an illustrative example demonstrating how to initialize the Eulerian integration and solicit user consent for its usage. {% embed url="" %} Example Enabling Eulerian in Next.js App Router {% endembed %} You may refer to the documentation of the consentManagement utility via the following link: {% embed url="" %} To operate effectively, Eulerian requires certain parameters, which are provided upon initial registration on the Eulerian platform. This example includes only those. For a complete list and descriptions of accepted parameters, refer to the following link: {% embed url="" %} Type definition of the Eulerian params {% endembed %} In-depth documentation elaborating on all these parameters can be found here: {% embed url="" %} Documentation of the Eulerian integration into @gouvfr/dsfr {% endembed %} For efficient tracking of interactions with various website elements, it's essential that each DSFR component is assigned a unique ID. This allows you to distinguish between different elements via the Eulerian dashboard metrics. Each component of the react-dsfr toolkit can be explicitly given an ID prop. In the event you don't assign one, react-dsfr will make an effort to generate comprehensible IDs that aid in component identification. # Content-Security-Policy Add security to you application `react-dsfr` supports strict Content-Security-Policy headers. ### Nonce {% embed url="" %} {% tabs %} {% tab title="Vite" %} Add your Content-Security-Policy either by configuring your server, or with the meta tag.\ Remember that a nonce **MUST be generated per requests**.\ \ Add the nonce to `react-dsfr`

import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";

const nonce = "123456789"; // you have to inject it on render
startReactDsfr({ defaultColorScheme: "system", nonce });

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

To get the nonce, you have to enable SSR with Vite and either inject the value in `process.env` or in a additional custom meta tag in your `index.html`. You can also infer it by using the content of the Content-Security-Policy meta tag if you configured the header this way.\ For more information about SSR in Vite see the following page. {% embed url="" %} Vite SSR {% endembed %} {% endtab %} {% tab title="Next.js App Router" %} {% hint style="info" %} This documentation is for [Next projects using the App router](https://nextjs.org/docs/app/building-your-application/routing). You are in this case if you have a `app/` directory at the root of your project. {% endhint %} The following assumes that you configured your CSP accordingly [to the Next.js recommendation](https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy). First configure the nonce in the `` tag in your root layout:

import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead";
import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes";
import { StartDsfr } from "./StartDsfr";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";
import { headers } from "next/headers";

export default function RootLayout({ children }: { children: JSX.Element; }) {
  const nonce = headers().get("x-nonce") ?? undefined;
  //NOTE: The lang parameter is optional and defaults to "fr"
  const lang = "fr";
  return (
    <html {...getHtmlAttributes({ defaultColorScheme, lang })} >
      <head>
        <StartDsfr />
        <DsfrHead Link={Link} nonce={nonce} />
      </head>
      <body>
        <DsfrProvider lang={lang}>
          {children}
        </DsfrProvider>
      </body>
    </html>
  );
}

The `X-Nonce` header is forwarded by the `middleware.ts` as suggested by Next.js. {% hint style="warning" %} It important to remember that reading headers in the root layout **turns all pages to dynamic rendering opt-in**. This is mandatory for nonce. {% endhint %} If you use the `NextAppDirEmotionCacheProvider`, don't forget to add the nonce to it accordingly to what Emotion and MUI needs: `` Then you have to tell `react-dsfr` to read and forward the nonce injected to all other scripts and styles by adding `doCheckNonce: true;` to the `startReactDsfr()` function:

"use client";

import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";

declare module "@codegouvfr/react-dsfr/next-appdir" {
  interface RegisterLink { 
    Link: typeof Link;
  }
}

startReactDsfr({ defaultColorScheme, Link, doCheckNonce: true });

export function StartDsfr(){
  //Yes, leave null here.
  return null;
}

{% endtab %} {% tab title="Next.js Pages Router" %} Next.js with old Pages Router is not supported. As per Next.js suggests, we recommended migrating to App Router. {% embed url="" %} App Router Migration {% endembed %} {% endtab %} {% tab title="Create React App" %} {% hint style="warning" %} `Create React App` by itself is a way to build **static sites** which by definition cannot handle dynamic headers (like CSP) per request as no server will serve the pages.\ Before getting into nonce configuration, you have ponder whether or not you need that level of security within your static app, and if so, choosing a solution to generate and inject the nonce into your app. {% endhint %} Once your injected the nonce into your app, add the following code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";

const nonce = "123456789" // have to be dynamic and injected
startReactDsfr({ defaultColorScheme: "system", nonce });

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

{% endtab %} {% tab title="Other" %} Your framework isn't supported? Let's [get in touch](https://github.com/codegouvfr/dsfr-react)! {% endtab %} {% endtabs %} ### Trusted Types Policy {% embed url="" %} Trusted Types are supported out-of-the box. When configuring your CSP you only have to add our policy names to your list:

Content-Security-Policy:
    require-trusted-types-for 'script';
    trusted-types react-dsfr react-dsfr-asap;

We register two policies with only the `createHTML` hook. Policy names are `react-dsfr` and `react-dsfr-asap` #### Custom policy name You can configure a custom policy name if you need to by adding the `trustedTypesPolicyName` options to the `startReactDsfr()` function. {% hint style="info" %} In Next.js App Router, `trustedTypesPolicyName` must also be set to the `` component. {% endhint %} When a custom name is set, the suffix `-asap` is used for the second policy. Don't forget to add both to your header configuration. **Example:** If you set `trustedTypesPolicyName: "my-app"` You header must be configured like so: `trusted-types my-app my-app-asap;` # Publishing a NPM modules that depends on react-dsfr You want to publish your own library of components that depends on react-dsfr? Here is an example: {% embed url="" %} A module that depend on react-dsfr and MUI {% endembed %} I recommend starting from ts-ci for any project meant to be published on NPM {% embed url="" %} The main takeway: * [@codegouv/react-dsfr must be a peer dependency of your project](https://github.com/EIG6-Geocommuns/geocommuns-core/blob/55e015a453a681a12bfa84624ccfd243ce8a6150/package.json#L48). Any app that would use your library would need to explicitely install react-dsfr. [For devloppement purpose, you want to add @codegouvfr/react-dsfr as devDependencies of your project](https://github.com/EIG6-Geocommuns/geocommuns-core/blob/55e015a453a681a12bfa84624ccfd243ce8a6150/package.json#L56). * Do not add `"postinstall": "copy-dsfr-to-public"` in your library's package.json. It's the responsability of the host app to do so. * If you rely on MUI, `@mui/material` `@emotion/styled` and `@emotion/react` should be peer dependencies as well. You should add those modules as devDependencies. * If you use TSS: react-dsfr dosen't need to be a peerDependencies but @emotion/react does, you do not configure the emotion cache in your lib, that's the the responsability of the host app. # Contributing Thank you for your willingness to contribute, here is the guide: {% embed url="" %}