diff --git a/apps/www/app/content/fundamentals/en/code/react.mdx b/apps/www/app/content/fundamentals/en/code/react.mdx index ec2b2521d9..5a221e8863 100644 --- a/apps/www/app/content/fundamentals/en/code/react.mdx +++ b/apps/www/app/content/fundamentals/en/code/react.mdx @@ -22,10 +22,22 @@ You can easily create your own theme later. ### Typescript -If you are using Typescript, make sure you have typescript >= 3.8 and install `@digdir/designsystemet-types`: - -```sh -npm i typescript @digdir/designsystemet-types --save-dev +If you are using Typescript, make sure you have typescript >= 3.8. + +#### Types for data attributes in React +Designsystemet provides type safety for `data-color` and `data-size` on React JSX elements. +We need to mutate React's built-in types to add these, and is why this is optional. +To enable this, add the following to your `tsconfig.json`: + +```json +{ + "compilerOptions": { + "types": [ + '/types.d.ts', // contains types for colors and sizes in your theme (the one you create with @digdir/designsystemet) + "@digdir/designsystemet-react/react-types", // adds types for data-color and data-size on React JSX elements + ] + }, +} ``` ## 2. Font diff --git a/apps/www/app/content/fundamentals/no/code/react.mdx b/apps/www/app/content/fundamentals/no/code/react.mdx index b82925c78f..d138728c1c 100644 --- a/apps/www/app/content/fundamentals/no/code/react.mdx +++ b/apps/www/app/content/fundamentals/no/code/react.mdx @@ -24,12 +24,26 @@ Du kan lett lage ditt eget tema senere. ### Typescript -Dersom du bruker Typescript, sørg for at du har typescript >= 3.8 og installerer `@digdir/designsystemet-types`: - -```sh -npm i typescript @digdir/designsystemet-types --save-dev +Dersom du bruker Typescript, sørg for at du har typescript >= 3.8. + +#### Typer for data-attributer i React + +Designsystemet tilbyr typesikkerhet for `data-color` og `data-size` på React JSX elementer. +Vi må endre på Reacts innebygde typer for å legge til disse, og det er derfor valgfritt. +For å aktivere dette, legg til følgende i din `tsconfig.json`: + +```json +{ + "compilerOptions": { + "types": [ + '/types.d.ts', // inneholder typer for farger og størrelser i ditt tema (den du lager med @digdir/designsystemet) + "@digdir/designsystemet-react/react-types", // legger til typer på data-color og data-size på React JSX elementer + ] + }, +} ``` + ## 2. Font Komponentene er designet og utviklet med [Inter fonten](https://github.com/rsms/inter), så variasjoner kan forekomme dersom du bruker en annen font.