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

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 C:\Program Files (x86)\Progress\Telerik Reporting 2026 Q3\Report Designer\Examples placed in the folder used by the UriReportSourceResolver in the Reporting REST service implementation.

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:

XML

<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:

JSON

"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

Steps:

Create new React application using the Creating a React App tutorial.
powershell
```
npx create-react-app my-app-with-viewer
cd my-app-with-viewer
```
Install the @progress/telerik-react-report-viewer NPM package by running:
powershell
```
npm install @progress/telerik-react-report-viewer
```

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

JSX

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

Add the React Report Viewer to the React component:

JSX

export function ReportViewer() {

    let viewer;
    const reportSource = { report: 'Report Catalog.trdp', parameters: {} };
    const viewerContainerStyle = { position: 'absolute', inset: '5px' };

    return (<>
        <TelerikReportViewer
            ref={el => viewer = el}
            serviceUrl="http://localhost:59657/api/reports/"
            reportSource={reportSource}
            viewerContainerStyle={viewerContainerStyle}
            viewMode="INTERACTIVE"
            scaleMode="SPECIFIC"
            scale={1.0}
            enableAccessibility={false} />
        <button id="refresh-button" onClick={() => viewer.refreshReport()}>Refresh</button>
        <button onClick={() => viewer.commands.print.exec()}>Print</button>
    </>)
}

Style the viewer using the desired Kendo UI Sass-Based Theme by adding references to the Sass-based CSS files in the <head> element of public/index.html:
HTML
```
<link href="https://kendo.cdn.telerik.com/themes/14.3.0/default/default-ocean-blue.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:
powershell
```
npm run start
```

Sample Project

Navigate to the installation folder of Telerik Reporting - C:\Program Files (x86)\Progress\Telerik Reporting 2026 Q3\Examples\React\Create-React-App to find the sample project.

How to Use React Report Viewer with REST Service

Prerequisites

Using React Report Viewer in React application

Steps:

Sample Project

See Also