# Localization

Learn how to translate ActiveReportsJS Report Viewer component to other languages

## Content

## ActiveReportJS Localization module

ActiveReportsJS provides the localization module that includes translations of the Report Viewer UI text to `English(en)`, `Japanese(ja)`, `Chinese(zh)`, `Korean(ko)`, `Dutch(nl)`, `Italian(it)`, `Brazilian Portuguese(pt-br)`, `German(de)`, and `French(fr)` languages. You can find this module 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 Report Viewer Localization module

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

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

In applications that use JavaScript modules, you can import the localization module from `@mescius/activereportsjs-i18n` package, for example:

```js
import "@mescius/activereportsjs-i18n";
```

## Setting Report Viewer UI language

In a [Pure JavaScript application](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/VanillaJS), the `MESCIUS.ActiveReportsJS.ReportViewer.Viewer` constructor accepts options as the second parameter, and the UI language can be set with these options, for example:

```js
var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", { language: "ja" });
```

In applications using [React](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component), [Angular](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component), [Svelte](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/svelte-component), or [Vue](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Vue-Component) Report Viewer components, you can set the language via the `language` property of the corresponding component. Here is an example of setting the Chinese language for the React Report Viewer component:

```javascript
import { Viewer as ReportViewer } from "@mescius/activereportsjs-react";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";
import "@mescius/activereportsjs-i18n";

function App() {
  return (
    <div className="App">
      <div id="viewer-host">
        <ReportViewer language="zh" />
      </div>
    </div>
  );
}
```

## Related links

* [Live Demo](/activereportsjs/demos/features/viewer-localization)