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


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:

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

    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

    All paths and URL links in the described steps must be adapted according to your project setup.


  1. Create new React application using the React tutorial.

    npx create-react-app my-app-with-viewer
    cd my-app-with-viewer
  2. Install jQuery by using the following command:

    npm install jquery
  3. Install the Telerik React Report Viewer NPM package by running:

    npm install @progress/telerik-react-report-viewer
  4. Once installed, import the TelerikReportViewer in the index.js file:

    import { TelerikReportViewer } from '@progress/telerik-react-report-viewer'
  5. Add the report viewer to the page:

    let viewer;
              ref={ el => viewer = el }
                  report: 'ProductCatalog.trdp',
                  parameters: {}
              viewerContainerStyle = {{
                  position: 'absolute',
                  left: '5px',
                  right: '5px',
                  top: '40px',
                  bottom: '5px',
                  overflow: 'hidden',
                  clear: 'both',
                  fontFamily: 'ms sans serif'
              enableAccessibility={false} />
  6. 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:

    <!-- The required Less-based styles -->
    <link href="" rel="stylesheet" />
    <link href="" rel="stylesheet" />

    To get the Sass-based Kendo UI themes, you can use either the pre-build CSS files or the NPM packages (Getting the Sass-Based Themes).

  7. Run the application:

    npm start

    Demo project

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

See Also

In this article