New to Telerik Reporting? Download 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.

  1. 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.

  2. Import the new file in the component where the viewer is used:

    import { StringResources } from './stringResources';
  3. Use the useEffect hook to extend the viewer object with the string resources for the desired culture after the component has mounted:

    export function ReportViewer() {
        const viewerRef = useRef(null);
        const [language, setLanguage] = useState(navigator.language);
        useEffect(() => {
            if (viewerRef) {
            const { viewerObject } = viewerRef.current;
            switch (language) {
                case "ja":
                viewerObject.stringResources = Object.assign(viewerObject.stringResources, StringResources.japanese);
                viewerObject.stringResources = Object.assign(viewerObject.stringResources, StringResources.english);
        }, [language])
        return (
            ref = {viewerRef}
            serviceUrl = ""
            reportSource = {{
                report: 'Dashboard.trdx',
                parameters: {}
            viewerContainerStyle = {{
                position: 'absolute',
                left: '5px',
                right: '5px',
                top: '40px',
                bottom: '5px',
                overflow: 'hidden',
                clear: 'both',
                fontFamily: 'ms sans serif'
            viewMode = "INTERACTIVE"
            scaleMode = "SPECIFIC"
            scale = {1.0}
            enableAccessibility = {false} />
In this article