---
order: 8
title: Internationalization
---

The default language of `@enos/dpl` is English as of yet.
If you want to use other languages, you can follow the instructions below.

## Locale

DPL provides a toolset `Locale` for configuring DPL locale text globally.

```jsx
import { Locale } from '@enos/dpl';
import zhCN from '@enos/dpl/lib/locale/lang/zh_CN';

Locale.use(zhCN);

return (
  <App />
);
```

Note: `zh_CN` is the filename, follow below.

Supported languages:

|Language|Filename|
|---|---|
|English|en_US|
|Chinese (Simplified)|zh_CN|

## Locale Utility

DPL provides a separate toolset `localeUtils` , it can be used to configure and use the project's global international resources, automatic resource combination and formatted text are also supported.

- Internationalized resources

Global resources are placed in the project's `locale` folder with the language key.

```
locale
  - en-US.js
  - zh-CN.js
```

Within a specific resource file, you can customize the nested structure to set the specific text value. The final key will combine all field names on the path, separated by `.`. In the following example, the final key of `title` will be `user.title`

```js
const locale = {
  user: {
    title: '---User---'
  }
};

export default locale;
```

- Initialize global resources

Initialize global resources at the project entry via the `init` method:

```js
import { init, collectResource } from '@enos/dpl/lib/locale/localeUtils';

init(collectResource(require.context('./locale', false, /\.js$/)));
```

DPL provides the method `collectResource`, which can automatically merge resources via webpack's require.context, but it can also be passed in manually, such as:

```js
import { init } from '@enos/dpl/lib/locale/localeUtils';
import enUS from './locale/en-US';
import zhCN from './locale/zh-CN';

const res = {
  'en-US': enUS,
  'zh-CN': zhCN
};

init(res);
```

- Get international text via key

```jsx
import localeText from '@enos/dpl/lib/locale/localeUtils';

ReactDOM.render(<div>{localeText('user.title')}</div>, mountNode);
```

- Formatted text supported

```js
// en-US.js
const locale = {
  user: {
    date: 'Current Date:{0}, Time:{1}',
    time: 'Current Time:{time}',
    welcome: 'Hello {name}, you have {count} unread messages'
  }
};

export default locale;

// Usage
import localeText from '@enos/dpl/lib/locale/localeUtils';

ReactDOM.render(
  <div>
    <div>{localeText('user.date', new Date().toDateString(), new Date().toTimeString())}</div>
    <div>{localeText('user.time', { time: new Date().toTimeString() })}</div>
    <div>{localeText('user.welcome', { name: 'Jason', count: 25 })}</div>
  </div>, mountNode);
```

- Local custom resources supported

```js
import { localeTextFromRes } from '@enos/dpl/lib/locale/localeUtils';

const localRes = {
  'en-US': {
    info: 'Locale Text {0}'
  },
  'zh-CN': {
    info: '局部文字 {0}'
  }
};

ReactDOM.render(<div>{localeTextFromRes('info', localRes)}</div>, mountNode);
```

Methods of toolset：

|Method Name|Parameters|Description|
|---|---|---|
| localeText | key: International text key | Get text value according to key, formatted text is supported, parameters can be mapped by location or key. This method is the default exported method.
| localeTextFromRes | key: International text key <br /> localeResource: Custom international resources | According to the key in the specified resource to obtain the text value, formatted text is supported, parameters can be mapped by location or key.
| getLocale | | Get current Locale.
| setLocale | locale: Locale to set | Set current Locale.
| setLocaleToCookie | locale: Locale to set <br /> options: Cookie options | Set Locale to Cookie.
| init | globalResource: Global international resources <br /> customDefaultLocale: Custom default locale，default to `en-US` | Initialize global international resources.
| collectResource | context: The result obtained by require.context | Automatically merge all international resources via require.context with the file name Locale key.