Skip to content

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"
locales={{
'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 Provider from '@dnb/eufemia/shared/Provider'
import Context from '@dnb/eufemia/shared/Context'
const ChangeLocale = () => {
const { setLocale, locale } = React.useContext(Context)
return <Dropdown
value={locale}
data={{ 'nb-NO': 'Norsk', 'en-GB': 'English' }}
on_change={({ data: { value } }) => {
setLocale(value)
}}
/>
}
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"
locales={{
'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.

The useTranslation Hook

Now, lets say you have your translation files as JSON object/files en.json:

{
"Modal.close_title": "Overwrite",
"my.string": "string {foo}"
}

and use it like this:

import EufemiaProvider from '@dnb/eufemia/shared/Provider'
import useTranslation, {
Translation,
} from '@dnb/eufemia/shared/useTranslation'
import nb from './nb.json'
import en from './en.json'
const Component = () => {
const str = useTranslation('my.string', {
foo: 'bar',
})
return str
}
render(
<EufemiaProvider
locale="nb-NO"
locales={{
'nb-NO': nb,
'en-GB': en,
}}
>
<Component />
<Translation id="my.string" foo="bar" />
</EufemiaProvider>
)

Get the strings from Context

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

import Provider from '@dnb/eufemia/shared/Provider'
const customTranslation = {
// extend the translation
'en-GB': {
myString: 'Custom string'
myGroup: {
subString: 'Second string'
}
}
}
render(
<Provider locales={customTranslation} locale="en-GB">
<MyApp>
<MyComponent />
</MyApp>
</Provider>
)

... and consume the strings in your components, like MyComponent:

import Context from '@dnb/eufemia/shared/Context'
export default function MyComponent() {
const { translation } = React.useContext(Context)
return <>{translation.myString}</>
}

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 locales={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>
)