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

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

Steps:

Create new React application using the React tutorial.

npx create-react-app my-app-with-viewer
cd my-app-with-viewer

Install jQuery by using the following command:
```
npm install jquery
```
Install the Telerik React Report Viewer NPM package by running:
```
npm install @progress/telerik-react-report-viewer
```

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

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

Add the report viewer to the page:

let viewer;
ReactDOM.render(
    <div>
        <TelerikReportViewer
            ref={ el => viewer = el }
            reportServer={{
                url: 'https://mytelerikreportserver:83/',
                username: 'myusername',
                password: 'mypass'
            }}
            reportSource={{
                report: 'Samples/Dashboard.trdp',
                parameters: {}
            }}
            viewerContainerStyle = {{
                position: 'absolute',
                left: '5px',
                right: '5px',
                top: '40px',
                bottom: '5px',
                overflow: 'hidden',
                clear: 'both',
                fontFamily: 'ms sans serif'
            }}
            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>
    </div>,
    document.getElementById('root')
);

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

<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.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:
```
npm start
```

How to Use React Report Viewer with Report Server

Prerequisites

Using React Report Viewer in React application

Steps:

See Also

Getting Started

Support Resources

Community