import React from "react"; import ReactDOM from "react-dom/client"; import { App } from "./App"; import { startReactDsfr } from "@codegouvfr/react-dsfr/spa"; startReactDsfr({ defaultColorScheme: "system" }); ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( <React.StrictMode> <App /> </React.StrictMode> );

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 /> </head> <body> <DsfrProvider lang={lang}> {children} </DsfrProvider> </body> </html> ); }

import { StartDsfrOnHydration } from "../dsfr-bootstrap"; export default function Page() { return ( <> {/* Important: You must mount this component on every pages of your App! */} <StartDsfrOnHydration /> <h1>Welcome!</h1> </> ); }

/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, //This option requires Next 13.1 or newer, if you can't update you can use this plugin instead: https://github.com/martpie/next-transpile-modules transpilePackages: [ "@codegouvfr/react-dsfr", "tss-react" // This is for MUI or if you use htts://tss-react.dev ], output: "export" }; module.exports = nextConfig

); } 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="routing" %} [routing](https://react-dsfr.codegouv.studio/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);

{% endtab %} {% tab title="Create React App" %} Add the following code in the `` {% code title="public/index.html" %} ```ejs <% [ //"Marianne-Light", //"Marianne-Light_Italic", "Marianne-Regular", //"Marianne-Regular_Italic", "Marianne-Medium", //"Marianne-Medium_Italic", "Marianne-Bold", //"Marianne-Bold_Italic", //"Spectral-Regular", //"Spectral-ExtraBold" ].forEach(function(name){ %> <% }); %> ``` {% endcode %} {% endtab %} {% endtabs %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://react-dsfr.codegouv.studio/readme.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.