Skip to content
Home

Localization

The default constants are defined in the /shared/defaults.js file.

  • The default locale of all components texts is: nb-NO.
  • The default currency is: NOK

Supported component translations

Eufemia components comes with a set of default translated strings.

You can easily change one, some or all of them by using a React provider – the Eufemia Provider.

Here are the default strings located:

import enGB from '@dnb/eufemia/shared/locales/en-GB'
import nbNO from '@dnb/eufemia/shared/locales/nb-NO'

How set the locale

In React based apps, use the shared Eufemia provider:

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


const myLocale = 'en-GB'


render(
  <Provider locale={myLocale}>
    <MyApp>Eufemia components</MyApp>
  </Provider>,
)

For component based locale, you can also make use of the lang attribute – if really needed:

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


render(
  <Provider locale="en-GB">
    <MyApp>
      <HelpButton lang="nb-NO" />
    </MyApp>
  </Provider>,
)

How set locale progressively

You can easily enhance or change translated strings progressively:

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


render(
  <Provider
    locale="nb-NO"
    translations={{
      'nb-NO': {
        Modal: { close_title: 'Something' },
      },
    }}
  >
    <MyApp>Eufemia components</MyApp>
  </Provider>,
)

How change the locale during runtime

You can even change the locale during runtime. Find more info in the Provider docs.

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, locale } = React.useContext(Context)


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


render(
  <Provider>
    <MyApp>
      <ChangeLocale />
    </MyApp>
  </Provider>,
)

How to combine with other tools

You can easily combine the locales support it with other translation tools, like react-intl.

Like, having the Eufemia components strings inside a JSON object/file en.json:

{
  "Modal.close_title": "Overwrite",
  "other.string": "{foo} ({bar} of {max})"
}

and use it like this:

import EufemiaProvider from '@dnb/eufemia/shared/Provider'
import nb from './nb.json' // Has to be an JavaScript object


render(
  <EufemiaProvider
    locale="nb-NO"
    translations={{
      'nb-NO': nb,
    }}
  >
    <MyApp>Eufemia components</MyApp>
  </EufemiaProvider>,
)

How to use your own translation strings

You have even the option to extend the strings with your own and use it as an internationalization tool replacement for e.g. react-intl.

Get the strings from Context

It is possible to use the Eufemia shared Provider for your own project / App localization.

import Provider, { Locales } from '@dnb/eufemia/shared/Provider'


const customTranslation = {
  // extend the translation
  'en-GB': {
    myString: 'Custom string',
    myGroup: {
      subString: 'Second string',
      stringWithArgument: 'String with {myArg}',
    },
  },
}


type CustomLocales = keyof typeof customTranslation
type CustomTranslation = (typeof customTranslation)[CustomLocales]


render(
  <Provider translations={customTranslation} locale="en-GB">
    <MyApp>
      <MyComponent />
    </MyApp>
  </Provider>,
)

... and consume the strings in your components:

import { useTranslation } from '@dnb/eufemia/shared'


function MyComponent() {
  const { myString, myGroup, formatMessage } =
    useTranslation<CustomTranslation>()
  return (
    <>
      <P>{myString}</P>
      <P>{myGroup.subString}</P>
      <P>
        {formatMessage('myGroup.stringWithArgument', {
          myArg: 'dynamic-value',
        })}
      </P>
    </>
  )
}

Cascaded string ids support

  1. Lets say you have your translation files as JSON object/files en.json:
{
  "Modal.close_title": "Overwrite",
  "my.string": "string {foo}"
}
  1. and use it with a React hook like this:
import {
  useTranslation,
  Provider as EufemiaProvider,
} from '@dnb/eufemia/shared'


import nb from './nb.json'
import en from './en.json'


const MyComponent = () => {
  const str = useTranslation('my.string', {
    foo: 'bar',
  })


  return str
}


render(
  <EufemiaProvider
    locale="nb-NO"
    translations={{
      'nb-NO': nb,
      'en-GB': en,
    }}
  >
    <MyComponent />
  </EufemiaProvider>,
)
  1. or as a React component:
import {
  Translation,
  Provider as EufemiaProvider,
} from '@dnb/eufemia/shared'


import nb from './nb.json'
import en from './en.json'


render(
  <EufemiaProvider
    locale="nb-NO"
    translations={{
      'nb-NO': nb,
      'en-GB': en,
    }}
  >
    <Translation id="my.string" foo="bar" />
  </EufemiaProvider>,
)

For TypeScript support, you can use the Translation component with a function. You may also want to make a wrapper, so you can use your own translation types:

import {
  Translation,
  TranslationProps,
  Provider as EufemiaProvider,
} from '@dnb/eufemia/shared'


const translations = {
  'nb-NO': { my: { string: 'streng {foo}' } },
  'en-GB': { my: { string: 'string {foo}' } },
}
type Translation = (typeof translations)[keyof typeof translations]


// Make a wrapper, so we can use your translation types
const MyTranslation = (props: TranslationProps<Translation>) => (
  <Translation {...props} />
)


render(
  <EufemiaProvider locale="nb-NO" translations={translations}>
    <MyTranslation id={(t) => t.my.string} foo="bar" />
  </EufemiaProvider>,
)

How add new locales

Create a new file (sv-SE.js) containing all the strings:

export default {
  'sv-SE': {
    DatePicker: {
      submit_button_text: 'OK',
    },
    Modal: {
      close_title: 'Stänga',
    },
    Logo: {
      alt: 'DNB Logo',
    },
  },
}

And add the file, like so:

import Provider from '@dnb/eufemia/shared/Provider'
import customTranslation from './locales/sv-SE'


render(
  <Provider translations={customTranslation}>
    <MyApp>Eufemia components</MyApp>
  </Provider>,
)

or add/update the locales during runtime:

import Provider from '@dnb/eufemia/shared/Provider'
import Context from '@dnb/eufemia/shared/Context'


import customTranslation from './locales/sv-SE'


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


  // Add new locales
  update({ locales: customTranslation, locale: 'sv-SE' })


  return locale
}


render(
  <Provider>
    <MyApp>
      ...
      <ChangeLocale />
      ...
    </MyApp>
  </Provider>,
)