` tag.
You can also customize the wrappers and the break token.
```tsx
import {
useTranslation,
renderWithFormatting,
Provider,
} from '@dnb/eufemia/shared'
const translations = {
'en-GB': {
'myGroup.subString':
'Use **bold** and _italic_ with a {br}line-break.',
},
}
type T = (typeof translations)['en-GB']
function MyComponent() {
const t = useTranslation()
return <>{renderWithFormatting(t.myGroup.subString)}
}
function MyApp() {
return (
)
}
```
#### Use without translations
You can also use `renderWithFormatting` directly, without the translation context. This is handy for static copy or small strings you build at runtime.
```tsx
import { renderWithFormatting } from '@dnb/eufemia/shared'
const text =
'Use **bold**, _italic_, `AB12-XYZ9` and a link https://www.dnb.no{br}Next line'
export function InlineFormattingExample() {
return <>{renderWithFormatting(text)}
}
```
Array input and dynamic strings are also supported:
```tsx
import { renderWithFormatting } from '@dnb/eufemia/shared'
function ArrayInputExample() {
const parts = ['Hello', '{br}', 'world! See https://example.com']
return <>{renderWithFormatting(parts)}
}
function DynamicExample({ refId }: { refId: string }) {
const text = `Keep your reference \`${'${refId}'}\` for support.`
return <>{renderWithFormatting(text)}
}
```
### Fallback for missing or partial translations
The shared `useTranslation` hook will output missing keys when:
- Empty explicit locale: returns pointer strings (e.g. `MyNamespace.label`) derived from `fallbackLocale="nb-NO"`.
- Partial explicit locale: merges missing keys as pointer strings, preserving existing ones.
- Non-existent current locale (no explicit entry in your translations): the hook preserves defaults (no pointers).
```tsx
import { useTranslation, Provider } from '@dnb/eufemia/shared'
const translations = {
'sv-SE': {}, // empty explicit current-locale
'en-GB': { MyNamespace: { label: 'English label' } },
}
type T = (typeof translations)['en-GB']
function Example() {
const t = useTranslation({
fallbackLocale: 'en-GB', // default: 'nb-NO'
})
return <>{t.MyNamespace.label /* 'MyNamespace.label' */}
}
render(
)
```
## TypeScript support
```tsx
import Provider, { Locales } from '@dnb/eufemia/shared/Provider'
const nbNO = {
myString: 'Min egendefinerte streng',
}
const enGB = {
myString: 'My custom string',
} satisfies typeof nbNO // Ensure the types are compatible
const myTranslations = {
'nb-NO': nbNO,
'en-GB': enGB,
}
// Infer the type of the translations
type Translation = (typeof myTranslations)[keyof typeof myTranslations]
```
## 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`:
```json
{
"Modal.close_title": "Overwrite",
"other.string": "{foo} ({bar} of {max})"
}
```
and use it like this:
```jsx
import EufemiaProvider from '@dnb/eufemia/shared/Provider'
import nb from './nb.json' // Has to be an JavaScript object
render(
Eufemia components
)
```
### Cascaded object (flat object, dot-notated keys) support
1. Lets say you have your translation files as JSON object/files `en.json`:
```json
{
"Modal.close_title": "Overwrite",
"my.string": "string {foo}"
}
```
2. and use it with a React hook like this:
```tsx
import {
useTranslation,
Provider as EufemiaProvider,
} from '@dnb/eufemia/shared'
import nb from './nb.json'
import en from './en.json'
const MyComponent = () => {
// Note: no TypeScript support when using an identifier.
const str = useTranslation('my.string', {
foo: 'bar',
})
return str
}
render(
)
```
3. or as a React component:
```tsx
import {
Translation,
Provider as EufemiaProvider,
} from '@dnb/eufemia/shared'
import nb from './nb.json'
import en from './en.json'
render(
)
```
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:
```tsx
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 TranslationType = (typeof translations)[keyof typeof translations]
render(
id={(t) => t.my.string} foo="bar" />
)
```
### Formatting markers inside `
id={(t) => t.info} />
)
```
## How to add Eufemia provided locales
### Eufemia components
Eufemia provides component translations for the following locales:
{Object.keys(languageDisplayNames).map((l) => (
-
{l}
))}
To include e.g. `sv-SE` you can use the following code:
```js
import { Provider } from '@dnb/eufemia/shared'
import svSE from '@dnb/eufemia/shared/locales/sv-SE'
render(
Your app
)
```
To include e.g. `da-DK` you can use the following code:
```js
import { Provider } from '@dnb/eufemia/shared'
import daDK from '@dnb/eufemia/shared/locales/da-DK'
render(
Your app
)
```
### Eufemia Forms
Eufemia provides forms translations for the following locales:
{Object.keys(languageDisplayNames).map((l) => (
-
{l}
))}
**Note:** Only `nb-NO` and `en-GB` are included by default.
To support other locales such as `sv-SE` or `da-DK`, you need to import and merge the locale translations yourself.
Use `mergeTranslations` to combine the forms translations (and country translations when needed) before you pass them to `Form.Handler` or `Provider`.
```js
import { mergeTranslations } from '@dnb/eufemia/shared'
import svSE_forms from '@dnb/eufemia/extensions/forms/constants/locales/sv-SE'
import svSE_forms_countries from '@dnb/eufemia/extensions/forms/constants/locales/countries/sv-SE'
import daDK_forms from '@dnb/eufemia/extensions/forms/constants/locales/da-DK'
import daDK_forms_countries from '@dnb/eufemia/extensions/forms/constants/locales/countries/da-DK'
const translations = mergeTranslations(
svSE_forms,
svSE_forms_countries, // if needed
daDK_forms, // if needed
daDK_forms_countries // if needed
)
```
You can provide the merged translations for fields and values in a few different ways.
#### Form.Handler
You can provide forms translations to the `translations` property within the [Form.Handler](/uilib/extensions/forms/Form/Handler/) component like this:
```js
import { Form } from '@dnb/eufemia/src/extensions/forms'
import { mergeTranslations } from '@dnb/eufemia/shared'
import svSE_forms from '@dnb/eufemia/extensions/forms/constants/locales/sv-SE'
import svSE_forms_countries from '@dnb/eufemia/extensions/forms/constants/locales/countries/sv-SE'
const translations = mergeTranslations(svSE_forms, svSE_forms_countries)
render(
Your form
)
```
#### Global translations
However, instead of providing the forms translations per form, you can also provide them globally using the `Provider` component:
```js
import { Provider, mergeTranslations } from '@dnb/eufemia/shared'
import svSE from '@dnb/eufemia/shared/locales/sv-SE'
import svSE_forms from '@dnb/eufemia/extensions/forms/constants/locales/sv-SE'
import svSE_forms_countries from '@dnb/eufemia/extensions/forms/constants/locales/countries/sv-SE'
const translations = mergeTranslations(
svSE,
svSE_forms,
svSE_forms_countries
)
render(
Your app, including Eufemia Forms
)
```
## How to add new locales
Create a new file (`nn-NO.js`) containing all the strings:
```js
export default {
'nn-NO': {
GlobalError: {
404: {
title: 'Me finn ikkje sida du leitar etter …',
},
},
},
}
```
And add the file, like so:
```jsx
import Provider from '@dnb/eufemia/shared/Provider'
import myTranslations from './locales/nn-NO'
render(
Eufemia components
)
```
### Add or update the locales during runtime
```tsx
import Provider from '@dnb/eufemia/shared/Provider'
import Context from '@dnb/eufemia/shared/Context'
import myTranslations from './locales/nn-NO'
const ChangeLocale = () => {
const { update, locale } = React.useContext(Context)
// Add new locales
update({ locales: myTranslations, locale: 'nn-NO' })
return locale
}
render(
...
)
```