New to Telerik Reporting? Download free 30-day trial

How to Use React Report Viewer with Report Server

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


The following list describes the prerequisites for this tutorial:

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 }
                    url: 'https://mytelerikreportserver:83/',
                    username: 'myusername',
                    password: 'mypass'
                    report: 'Samples/Dashboard.trdp',
                    parameters: {}
                viewerContainerStyle = {{
                    position: 'absolute',
                    left: '5px',
                    right: '5px',
                    top: '40px',
                    bottom: '5px',
                    overflow: 'hidden',
                    clear: 'both',
                    fontFamily: 'ms sans serif'
                enableAccessibility={false} />
            <button id="refresh-button" onClick={ () => viewer.refreshReport() }>Refresh</button>
            <button onClick={ () => viewer.commands.print.exec() }>Print</button>
  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

See Also

In this article