Localization of React Report Viewer allows you to localize the static text such as tooltip, parameter block, and dialog text based on a specific culture. To render the static text with specific culture, refer to the following corresponding culture script files and set culture name to the locale
property of the Report Viewer.
* `ej.localetexts.fr-FR.min.js`
Refer this CDN links for Localization and Culture to get the Localization and Culture scripts for available Culture Code.
@boldreports/javascript-reporting-controls
package.npm install @boldreports/javascript-reporting-controls --save
ej.localetexts.fr-FR.min.js
script file from node_modules
in the App.js
file.import React from 'react';
import './App.css';
//Report Viewer source
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-viewer.min.css';
//Data-Visualization
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/localization/reportviewer/ej.localetexts.fr-FR.min.js';
...
...
Initialize the locale
property in the App.js
file as shown like in below code snippet.
var locale = 'fr-FR';
function App() {
return (<div id="viewer" style={viewerStyle}>
<BoldReportViewerComponent id="reportviewer-container"
reportServiceUrl = {'https://demos.boldreports.com/services/api/ReportViewer'}
reportPath = { 'GroupingAgg.rdl' }
locale = {locale}
>
</BoldReportViewerComponent>
</div>);
}