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"
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>,
)

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>,
)