How to Add a React Report Viewer to Your Web Application

ActiveReportsJS is a client-side reporting solution that can be used in a variety of different front-end frameworks and libraries. From vanilla JavaScript to NuxtJS, ARJS is extremely flexible when designing your application and using its components.

The React Report Viewer component is an essential tool for integrating robust reporting solutions into React applications. Designed for React, this component allows developers to seamlessly embed ActiveReportsJS reports into their applications while leveraging React’s declarative programming model.

Benefits

• Enhances User Experience: By providing end-users with an intuitive interface for viewing and interacting with reports directly in the React application.
• Reduces Development Effort: Simplifies the process of embedding complex reporting features, saving development time and effort.
• Supports Scalable Applications: The component’s modular architecture and lightweight footprint make it ideal for scalable and maintainable React applications.

With the React Report Viewer component, developers can deliver powerful and interactive reporting features that align with the modern requirements of React-based applications, ensuring an optimal user experience.

In this article, we’ll break down how to add and customize the Report Viewer component in your React application. We’ll be covering the following steps:

1. Installing the Dependencies
2. Importing the Styles
3. Creating a Report File
4. Integrating the Viewer Component to our App
5. Running the Application

Ready to Try ActiveReportsJS in Your Web Application? Download Your Free 30-Day Trial!

Installing the Dependencies

First, you’ll need to create a React application for your React Report Viewer; to create one, run the following command:

npm install @grapecity/activereports-react

Once you’ve created your React application, we’ll need to install the ActiveReportsJS React package. We’ll be using NPM to install ActiveReportsJS. To do so, run the following command:

npm init react-app arjs-viewer-app

Importing the Styles

Once we’ve installed the React packages, we can import the ActivReportsJS Report Viewer styles files. We’ll also style a div element that we’ll use to host the Report Viewer component:

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css"; 

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

Creating a Report File

Next, we’ll need to add an ActiveReportsJS report file to our application. For the purposes of this demo, we’ll manually create a report. However, you can feel free to use a report created with the Report Designer component.

Since ActiveReportsJS reports use the .rdlx-json extension, we can format the properties and controls of the report via JSON syntax. Add a new file to your application’s public folder and name it report-text.rdlx-json. Within that file, add the following JSON:

{
  "Name": "report-test",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Testing the textbox!",
        "Style": {
          "FontSize": "20pt"
        },
        "Width": "8.5in",
        "Height": "1.5in"
      }
    ]
  }
}

This will create a report that contains a textbox that reads “Testing the textbox!”.

If you’d like information on creating a report through our API, look deeply at our documentation here to see what can be added to a report at runtime.

Integrating the Viewer Component to our App

Now, in the App.js file, let’s add the following code to get the viewer component to show on our page. This will also link the React report we just made to our viewer component.

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

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

export default App;

Here, we import the React Report Viewer component from the ActiveReportsJS React module. We then initialize it in markup, and bind the report that we created to the report property.

Running the Application

Occasionally, we will encounter an error that blocks us from using ‘npm start’ while debugging our project. To fix this, change the start script in the package.json file to the following:

"start": "react-scripts --max_old_space_size=8192 start"

Run the project with the ‘npm start’ command in the terminal. If all goes well, you will see the viewer component on your page and the report file embedded within it. If you run into further issues or errors, please open a ticket with our support team for more assistance.

Theme Editor

If you want to customize the React report viewer's colors, fonts, and themes, you can do so by using the theme editor found on our website. Select which settings you’d like to use and preview the viewer component on our page. Once you find a theme you love, download the CSS styles from the button at the bottom of the page. Afterward, move the files into the styles folder within your application (node_modules/@grapecity/activereports/styles) to overwrite the default viewer theme. If you would rather use pre-created themes, there is a wide selection that you can learn about here.

Final Points

After following the steps in this walkthrough, you should now be able to add the React Report Viewer component to your application. The viewer will be great for your reporting needs, given the rich API, customization techniques, and language translation options that ARJS provides. If you have questions regarding more complex use cases, please read through our documentation.

Thanks for using ActiveReportsJS!

Ready to Try ActiveReportsJS in Your Web Application? Download Your Free 30-Day Trial!