---
description: >-
title: Provider and context
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.157Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Provider and context

To use the provider, you currently need to use React as your rendering library.

Many components have some default translated strings. But also other things like the default currency and so on, can be controlled globally by using a Provider. Changing the properties of the provider, will automatically update all the components who has used a value from it.

Here are some example usage of the Provider / Context relation ship.


## Send down component properties

You can use the Provider to send down component properties. And because providers can be nested, it's a really powerful tool to handle generally properties used often by a component.

```jsx
import Provider from '@dnb/eufemia/shared/Provider'

render(
  <MyApp>
    ...
    <Provider Button={{ size: 'large' }}>
      ...
      <Button>Large button</Button>
    </Provider>
  </MyApp>
)
```

You can also use the `value` property to define the component properties:

```jsx
<Provider
  value={{
    Button: { size: 'large' },
  }}
>
  ...
  <Button>Large button</Button>
</Provider>
```

## Icon assets

Named icons work without provider configuration. Released packages automatically use the public asset CDN directory for their installed Eufemia version; development builds use the unversioned directory. Bundled primary icons render locally.

Use `iconBaseUrl` to point named icons to your own asset directory:

```tsx
import { Button, Icon } from '@dnb/eufemia'
import Provider from '@dnb/eufemia/shared/Provider'

function App() {
  return (
    <Provider iconBaseUrl="/assets/icons">
      <Icon icon="heart" />
      <Button text="Favorite" icon="heart" />
    </Provider>
  )
}
```

Set `iconBaseUrl={false}` to disable remote icon loading. Imported icons still render, as do bundled primary names in `IconPrimary` and components that use it.

See the [Icon loading guidance](/web/components/icon#loading-icons-by-name) for self-hosting setup, supported URLs, fallback behavior, CSP and CORS.

## Using useSharedContext hook

If you want to pass custom values besides the built-in ones, the `useSharedContext` hook provides a type-safe way to access context values from the Provider.

```tsx
import { Provider, useSharedContext } from '@dnb/eufemia/shared'

type MyData = { myValue: string }

function MyComponent() {
  const { myValue } = useSharedContext<MyData>()
  return <>{myValue}</>
}

function App() {
  return (
    <Provider value={{ myValue: 'Hello, World!' }}>
      <MyComponent />
    </Provider>
  )
}
```

## Changing locale or currency

You can either set the locale as a property e.g. `<Provider locale="en-GB" ...` and handle the change from the app root, or change it inside the app, respective Context:

```tsx
import { Field } from '@dnb/eufemia/extensions/forms'
import Provider from '@dnb/eufemia/shared/Provider'
import Context from '@dnb/eufemia/shared/Context'

const ChangeLocale = () => {
  const { setLocale, update, locale } = React.useContext(Context)

  React.useEffect(() => {
    // Change the locale
    update({ locale: 'en-GB' })

    // Change the default currency
    update({ currency: 'USD' })
  }, [])

  return (
    <Field.Selection value={locale} onChange={(value) => setLocale(value)}>
      <Field.Option value="nb-NO" title="Norsk" />
      <Field.Option value="sv-SE" title="Svenska" />
      <Field.Option value="da-DK" title="Dansk" />
      <Field.Option value="en-GB" title="English (GB)" />
    </Field.Selection>
  )
}

render(
  <Provider>
    <MyApp>
      <ChangeLocale />
      text <NumberFormat.Number>123</NumberFormat.Number> table etc.
    </MyApp>
  </Provider>
)
```

## Nested Providers

Yes, it's possible to have nested providers.

You have then to decide what you need to update.

```tsx
import { Field } from '@dnb/eufemia/extensions/forms'
import Provider from '@dnb/eufemia/shared/Provider'
import Context from '@dnb/eufemia/shared/Context'

const ChangeLocale = () => {
  const { setCurrentLocale, updateCurrent, locale } =
    React.useContext(Context)

  React.useEffect(() => {
    // Change the locale
    updateCurrent({ locale: 'en-GB' })

    // Change the default currency
    updateCurrent({ currency: 'USD' })
  }, [])

  return (
    <Field.Selection
      value={locale}
      onChange={(value) => setCurrentLocale(value)}
    >
      <Field.Option value="nb-NO" title="Norsk" />
      <Field.Option value="en-GB" title="English (GB)" />
    </Field.Selection>
  )
}

render(
  <Provider locale="en-GB">
    <MyApp>
      <Provider locale="nb-NO">
        Norsk <NumberFormat.Number>1234</NumberFormat.Number>
        <ChangeLocale />
      </Provider>
      English <NumberFormat.Number>1234</NumberFormat.Number>
    </MyApp>
  </Provider>
)
```

## Provider and context troubleshooting

If there is a module format deviation, components do not share anymore the same provider and context. So, make sure you have a consistent import routine, not like this:

```js
// NB: Example of deviant module formats
import Provider from '@dnb/eufemia/shared/Provider' // like /esm
import { Button } from '@dnb/eufemia/es'
import { NumberFormat } from '@dnb/eufemia/cjs/components'
```


## Properties


```json
{
  "props": {
    "children": {
      "doc": "The content.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "value": {
      "doc": "Send in an object that gets spread as properties to the Provider.",
      "type": "object",
      "status": "optional"
    },
    "locale": {
      "doc": "Defines the locale used for translations and number formatting. Eufemia includes `nb-NO` and `en-GB`, and you can [add other locales](/web/styling-and-themes/configuration/localization/#how-to-add-eufemia-provided-locales), such as `sv-SE` or `da-DK`. Defaults to `nb-NO`.",
      "type": "string",
      "status": "optional"
    },
    "currency": {
      "doc": "Defines the default currency. It is used by `NumberFormat.Currency`, by `Field.Currency` and `Value.Currency` when they have no `currency` of their own, and when `currency` or `asCurrency` is `true` on `NumberFormat`, `Field.Number` or `InputMasked`. Defaults to `NOK`.",
      "type": "string",
      "status": "optional"
    },
    "currencyDisplay": {
      "doc": "Deprecated. Has no effect. Use `NumberFormat={{ currencyDisplay: 'code' }}` instead.",
      "type": "string",
      "status": "deprecated"
    },
    "translations": {
      "doc": "Overwrite existing translation strings or define new strings, per locale. See [Provide your own translations](/web/styling-and-themes/configuration/localization/#provide-your-own-translations).",
      "type": "object",
      "status": "optional"
    },
    "translationsLoader": {
      "doc": "Async function that loads translations for a given locale. It is called on mount and whenever the locale changes, and the loaded translations are merged with `translations`. See [Async translations with translationsLoader](/web/styling-and-themes/configuration/localization/#async-translations-with-translationsloader).",
      "type": "function",
      "status": "optional"
    },
    "messageFormatter": {
      "doc": "Message formatter for advanced message formatting, such as ICU MessageFormat. Import and pass `icu` from `@dnb/eufemia/shared` to enable pluralization, select and other ICU features in translation strings. See [ICU Message Format](/web/styling-and-themes/configuration/localization/#icu-message-format).",
      "type": "function",
      "status": "optional"
    },
    "skeleton": {
      "doc": "Enables the skeleton on all components inside the Provider that support it.",
      "type": "boolean",
      "status": "optional"
    },
    "formElement": {
      "doc": "Properties for all form components inside the Provider: `disabled`, `skeleton`, `vertical`, `labelDirection` and `translate`.",
      "type": "object",
      "status": "optional"
    },
    "iconBaseUrl": {
      "doc": "Optional SVG directory override for named icons. Defaults to the public asset CDN for the installed Eufemia version, or the unversioned CDN in development. Set `false` to disable remote icon loading. See [Icon assets](/web/styling-and-themes/configuration/provider/#icon-assets).",
      "type": [
        "string",
        "false"
      ],
      "status": "optional"
    },
    "breakpoints": {
      "doc": "Custom breakpoints for the `MediaQuery` component and the `useMedia` and `useMediaQuery` hooks. See [Use different breakpoints](/web/layout-and-typography/breakpoints/#use-different-breakpoints).",
      "type": "object",
      "status": "optional"
    },
    "Component properties": {
      "doc": "Default properties for a component, given by the component name, such as `Button={{ size: \"large\" }}`. See [Send down component properties](/web/styling-and-themes/configuration/provider/#send-down-component-properties).",
      "type": "object",
      "status": "optional"
    }
  }
}
```