How to Add a React Report Viewer to Your Web Application

What You Will Need
• ActiveReportsJS React

Controls Referenced
• Core.Rdl Report
• Get Started: React Report Viewer
• Report Viewer: Overview
• ActiveReportJS Viewer Themes

Tutorial Concept
Learn how to seamlessly integrate a React Report Viewer into your web application to render, view, and interact with dynamic reports directly within your React project.

As companies shift toward web and cloud platforms, users have come to expect easy, on-the-go access to critical business data. ActiveReportsJS answers those needs with a robust client-side reporting solution that makes viewing and analyzing reports possible on any modern browser, no server processing required.

Packed with powerful interactive features, ActiveReportsJS includes both a visual report designer and a highly customizable report viewer. Better yet, it integrates seamlessly with React and other major frameworks, making it a versatile choice for any modern web development stack.

In this guide, we’ll walk you through the process of integrating the ActiveReportsJS Report Viewer into a React application. You’ll learn how to:

• Set up a React project using Vite and VS Code
• Install ActiveReportsJS with NPM or Yarn
• Import the viewer component and required styles
• Create a sample .rdlx-json report file
• Initialize the React Report Viewer component
• Launch your app and view your first report

1. Set Up Your React Project with Vite

Let’s start by creating a new React app using Vite, a fast and modern build tool.

Using npm:

npm init vite arjs-vite-react-app -- template react

Or, if you prefer Yarn:

yarn create vite arjs-vite-react-app --template react

Follow the prompts to scaffold your project. Once complete, open the newly created project folder in VS Code to proceed.

2. Install ActiveReportsJS via NPM or Yarn

With your React app ready, you can install the ActiveReportsJS React package. Run one of the following commands in your terminal:

Using npm:

npm install @mescius/activereportsjs-react@latest

Or with Yarn:

yarn add @mescius/activereportsjs-react@latest

This will fetch the latest version of the package and add it to your project dependencies.

3. Import Viewer Styles and Component

Now it’s time to bring in the necessary styles and the Viewer component itself.

Add CSS Imports

Open your project’s index.css file and include these lines:

@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.css";

#viewer-host {
  width: 100%;
  height: 100vh;
}

This will import the main UI CSS file, as well as the Viewer’s CSS file. The #viewer-host style also ensures that the viewer takes up the full browser height, which is essential for a good user experience.

Import the Viewer Component

Next, head over to App.jsx and import the Viewer:

import { Viewer } from "@mescius/activereportsjs-react";

You’re now ready to embed the viewer in your component tree.

4. Create a Sample .rdlx-json Report File

To display something in the viewer, you’ll need a report file. ActiveReportsJS uses .rdlx-json format for report templates.

Inside the public folder of your React project, create a new file called report.rdlx-json and paste in the following sample report:

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

This JSON defines a simple report with a single textbox that displays a greeting.

5. Add the Report Viewer to Your React Component

Now we’ll render the Report Viewer and link it to the report you just created.

In App.jsx, update your App() function like this:

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

Here’s what’s happening:

• The div uses the viewer-host ID we styled earlier.
• The <Viewer /> component loads and displays the report.rdlx-json file when the app runs.

6. Run the App and View the Report

You’re all set! Fire up your application with:

Using npm:

npm run dev

Or with Yarn:

yarn dev

Once it compiles, open your browser to http://localhost:4200. You should see the React Report Viewer in action, displaying your custom report. Congratulations!

Wrapping Up

You’ve just taken the first step toward adding powerful, browser-based reporting to your React applications using ActiveReportsJS. From here, you can explore more complex report layouts, dynamic data sources, and runtime interactions.

Need more help? Dive into our ActiveReportsJS documentation or reach out to the support team for one-on-one guidance.