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 %}