Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Provider

Provider er en hjelpekomponent som lar deg konfigurere andre komponenter på globalt nivå.

StabilOppdatert 30. april 2025
GithubEndringslogg

Egnet til:

  • Overstyre root-element for portaler
  • Endre språk/tekster for komponenter

Overstyre root-element

Enkelte komponenter bruker portal, noe som ikke fungerer med f.eks. shadow-dom. rootElement lar deg velge hvor portalen skal mountes.

JSX
// Kan lage en ny root
const rootElement = document.createElement("div");


// Eller velge en som eksisterer fra før
const rootElement = document.getElementById("custom-root")
    
const Example = () => (
  <Provider rootElement={rootElement}>
    <App />
  </Provider>
)

Endre språk/tekster

Alle komponenter bruker norsk bokmål (nb) som standard. locale lar deg endre språk til enten nynorsk (nn) eller engelsk (en).

Selv om vi ønsker at komponentene skal se likt ut på tvers av løsninger, kan det noen ganger være behov for å overstyre noen av standard-tekstene. Dette kan gjøres med translations.

TSX
import { nn } from "@navikt/ds-react/locales";


function Main() {
  return (
    <Provider locale={nn} translations={{ Combobox: { addOption: "Opprett" } }}>
      <App />
    </Provider>
  );
}

Noen komponenter har også en egen translations-prop som kan brukes hvis du bare vil endre på én instans av komponenten.

Støtter appen din andre språk enn de vi har tilgjengelig vil vi gjerne høre fra deg.

Props

Provider

rootElement?

  • Type:
    HTMLElement
  • Description:

    Global root-element to attach portals to. Used by Tooltip, Modal (optionally) and ActionMenu.

locale?

  • Type:
    { global: { dateLocale: Locale; showMore: string; showLess: string; readOnly: string; close: string; }; Alert: { closeAlert: string; closeMessage: string; error: string; info: string; success: string; warning: string; }; ... 15 more ...; Timeline: { ...; }; }
  • Default:
    nb
  • Description:

    Aksel locale

  • Example:
    ```jsximport { en } from "@navikt/ds-react/locales";<Provider locale={en}> {app}</Provider>```

translations?

  • Type:
    RecursivePartial<{ global: { dateLocale: Locale; showMore: string; showLess: string; readOnly: string; close: string; }; Alert: { closeAlert: string; closeMessage: string; error: string; info: string; success: string; warning: string; }; ... 15 more ...; Timeline: { ...; }; }> | RecursivePartial<...>[]
  • Description:

    Use this if you need to override some of the default translations. Can be a single object or an array of objects. Must be used together with the locale prop.