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

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


  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, the Kendo UI CDN, 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