# Localization

Learn how to localize ActiveReportsJS Report Designer component

## Content

### ActiveReportsJS Localization module

ActiveReportsJS provides the localization module that includes translations of the Report Designer UI texts to `Japanese(ja)`, `Chinese(zh)`, and `French(fr)` languages. This module is available in the `dist\locales` folder of the [download package](https://developer.mescius.com/activereportsjs/download)
In addition, the localization module is distributed via the [@mescius/activereportsjs-i18n](https://www.npmjs.com/package/@mescius/activereportsjs-i18n) package and the [CDN](https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/ar-js-locales.js).

### Importing ActiveReportsJS Localization module

In Pure JavaScript applications, the localization module scripts can be referenced with `script` tag, for example:

```html
<script type="text/javascript" src="https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/designer/ja-locale.js"></script>
```

Angular, React, or Vue applications can import the localization scripts from the `@mescius/activereportsjs-localization` package, for example:

```js
import "@mescius/activereportsjs-i18n/dist/designer/ja-locale";
```

### Setting Report Designer UI language

The [Angular](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Angular-Component), [Vue](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Vue-Component), [React](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/React-Component) and [Svelte](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/svelte-component) report designer components expose the `onInit` property that should resolve to a function returning the [DesignerConfig object](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) which includes the `language` property. Here is an example for `React`.

```js
import React from "react";
import { Designer } from "@mescius/activereportsjs-react";

function onInit() {
  return {
      language: "fr"
  };
}

function App() {
  return (
      <Designer onInit={onInit} />
  );
}
```

In a pure JS application, the [Designer constructor](https://developer.mescius.com/activereportsjs/api/classes/ReportDesigner.Designer#constructor) accepts the `DesignerConfig` object as the second parameter:

```js
var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer("#designer-host", { language: "fr" });
```

The [Integration](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration) page contains more information on integrating the ActiveReportsJS Report Designer component in various applications.
You could also visit the [Live Demo](/activereportsjs/demos/features/designer-localization) for the complete samples for pure JavaScript, Angular, Vue, and React applications.