How to Use React Report Viewer with REST Service

This tutorial demonstrates how to add the React Report Viewer component to a new React application and display a report coming from the Telerik Reporting REST Service.

Prerequisites

The following list describes the prerequisites for this tutorial:

Review the React Report Viewer Requirements.
A running application that hosts a Reporting REST service at address /api/reports. For more information, see Telerik Reporting REST Services.
Copy of the "Product Catalog.trdp" report file from [TelerikReporting_InstallDir]\Report Designer\Examples placed in the folder used by the UriReportSourceResolver in the Reporting REST service project.

Entry with the default connection string used by Telerik Reporting sample reports in the configuration file of the project hosting the Reporting REST service. For example:

web.config file:

<connectionStrings>
    <add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
                connectionString="Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"
                providerName="System.Data.SqlClient" />
</connectionStrings>

appsettings.json file:

{
    ...
    "ConnectionStrings": [
        {
            "name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
            "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
            "providerName": "System.Data.SqlClient"
        }
    ]
}

Using React Report Viewer in React application

<blockquote class='note'><p>All paths and URL links in the described steps must be adapted according to your project setup.</p></blockquote>

Steps:

Create new React application using the React tutorial.

npx create-react-app my-app-with-viewer
cd my-app-with-viewer

Install jQuery by using the following command:
```
npm install jquery
```
Install the Telerik React Report Viewer NPM package by running:
```
npm install @progress/telerik-react-report-viewer
```

Once installed, import the TelerikReportViewer in the index.js file:

import { TelerikReportViewer } from '@progress/telerik-react-report-viewer'

Add the report viewer to the page:

let viewer;
ReactDOM.render(
    <div>
    <TelerikReportViewer
        ref={ el => viewer = el }
        serviceUrl="http://localhost:[portnumber]/api/reports/"
        reportSource={{
            report: 'ProductCatalog.trdp',
            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} />
    </div>,
document.getElementById('root')
);

Style the viewer using the desired Kendo UI theme (еither using Less-Based Themes or Sass-Based Themes): Add references to the Less-based CSS files in the <head> element of index.html:
```

<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" />
```
To get the Sass-based Kendo UI themes, you can use either the pre-build CSS files, the Kendo UI CDN, or the NPM packages (Getting the Sass-Based Themes).
Run the application:
```
npm start
```

Demo project

A sample project can be found in the installation folder of Telerik Reporting [TelerikReporting_InstallDir]\Examples\React.

How to Use React Report Viewer with REST Service

Prerequisites

Using React Report Viewer in React application

Steps:

Demo project

See Also

Getting Started

Support Resources

Community