import { fr } from "@codegouvfr/react-dsfr"; export type Props = { className?: string; }; export const MyComponent =(props: Props) => { const { className } = props; return ( <div className={className} style={{ padding: fr.spacing("10v"), //SEE: https://components.react-dsfr.codegouv.studio/?path=/docs/%F0%9F%8E%A8-color-helper--page backgroundColor: fr.colors.decisions.background.alt.blueFrance.active }} > <span className={fr.cx("fr-p-1v")} style={{ ...fr.spacing("margin", { "topBottom": "3v" }) }} > Hello World </span> </div> ); };

import { fr } from "@codegouvfr/react-dsfr"; function MyComponent() { return ( <div style={{ marginTop: fr.spacing("2v"), ...fr.spacing("padding", { topBottom: "5w", left: 5 }) }} /> ); }

); } ``` 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 %}