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/12.3.0/default/default-ocean-blue.css" rel="stylesheet" />

> note 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](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/installation)).

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