New to Telerik Reporting? Start a free 30-day trial

Localization of the React Report Viewer

The article elaborates on how to localize the messages displayed by the React Report Viewer.

To localize the report viewer, create a new TypeScript file stringResources.ts:

export class StringResources {
    static english = {
        loadingReport: 'Loading...',
        // override other string resources here
    }
    static japanese = {
        loadingReport: 'ちょっと、まってください...',
        // override other string resources here
    }
    // override string resources for other cultures here
}

The file can contain all or only a part of the string resources which would be localized. For a full list of the report viewer string resources which could be localized, please refer to HTML5 Report Viewer Localization.

Import the new file in the component where the viewer is used:
TS
```
import { StringResources } from './stringResources';
```

Pass the localization resources to the viewer component through the localizationResources prop:

JSX

import { StringResources } from './stringResources';

export function ReportViewer() {

    const reportSource = { report: 'Dashboard.trdx', parameters: {} };
    const viewerContainerStyle = { position: 'absolute', inset: '5px', fontFamily: 'ms sans serif' };

    return (
        <TelerikReportViewer
            serviceUrl="https://demos.telerik.com/reporting/api/reports/"
            reportSource={reportSource}
            viewerContainerStyle={viewerContainerStyle}
            viewMode="INTERACTIVE"
            scaleMode="SPECIFIC"
            scale={1.0}
            enableAccessibility={false}
            localizationResources={getLocalizationResources()} />)
}

function getLocalizationResources() {
    switch (navigator.language) {
        case "ja":
            return StringResources.japanese;
        default:
            return StringResources.english;
    }
}

The localizationResources prop passes the string resources to the viewer during initialization, ensuring that all viewer areas (toolbar, content area, info messages) are properly localized.

Localization of the React Report Viewer

See Also