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

Prerequisites

The following list describes the prerequisites for this tutorial:

Review the React Report Viewer Requirements.
A running intance of the Telerik Report Server.

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

JSX

export function ReportViewer() {

    let viewer;
    const reportServer = { url: 'https://localhost:83/', username: 'myusername', password: 'mypass' };
    const reportSource = { report: 'Samples/Dashboard.trdp', parameters: {} };
    const viewerContainerStyle = { position: 'absolute', inset: '5px' };

    return (
        <>
            <TelerikReportViewer
                ref={el => viewer = el}
                reportServer={reportServer}
                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-built CSS files, the Kendo UI CDN, or the NPM packages (Getting the Sass-Based Themes).
Run the application:
powershell
```
npm start
```

How to Use React Report Viewer with Report Server

Prerequisites

Using React Report Viewer in React application

Steps:

See Also