Hopp til hovedinnhold

Kom i gang med React

Følg disse stegene for å komme i gang med React-komponentene. Det anbefales at du også leser om CSS.

1. Installer pakkene

Dersom du ikke lager ditt eget tema kan du bruke et standardtema fra @digdir/designsystemet-css/theme. 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:

2. Font

Komponentene er designet og utviklet med Inter fonten, så variasjoner kan forekomme dersom du bruker en annen font. Dersom du velger å installere fonten på en annen måte, husk å inkludere fontvektene 400, 500 og 600.

Legg til Inter fonten (valgfritt)

Legg til <link> taggen under i <head>, og sett font-family til Inter i din globale css fil.

HTML

Du kan bruke denne koden for å legge til fonten:

CSS

Vi anbefaler sterkt at du legger til følgende i din globale css fil. font-feature-settings legger til en hale på små L'er.

3. Bruk en React-komponent

@digdir/designsystemet-css og @digdir/designsystemet-css/theme må kun importeres én gang i applikasjonen.

Eksta

Polyfill

Designsystemet bruker popover i enkelte komponenter. Dette apiet er klassifisert som Baseline: Newly available fra april 2024, da Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en polyfill for å sikre at popover fungerer for alle.

Rediger denne siden på github.com (åpnes i ny fane)