v2.2.0
v2.2.0v2.1.0v2.0.0v1.2.0

Get Started with ActiveReportsJS Report Viewer React Component

Create React Application

The easiest way to create a new React application is to use Create React App tool. Run the following command from the command prompt or terminal to create a React application with default options. For details, see Getting Started on the Create React App site.

npm init react-app arjs-react-viewer-app

Or if you are using yarn:

yarn create react-app arjs-react-viewer-app

For more ways to create a React application, see the official documentation

Install ActivereportsJS npm packages

The React Report Viewer Component is distributed via @grapecity/activereports-react npm package that depends on the main @grapecity/activereports package that includes the core functionality. To install the current version of these packages, run the following command from the application's root folder.

npm install @grapecity/activereports-react

Or if you are using yarn:

yarn add @grapecity/activereports-react

Import ActiveReportsJS styles

Open the src\App.css file and replace its content with the following code. It imports the default Report Viewer Component Styles and defines style for the element that will hosts the React 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;
}

Add ActiveReportsJS report to the application

ActiveReportsJS uses JSON format and rdlx-json extension for report template files. In the public folder, create the new file called report.rdlx-json and insert the following JSON content into that file.

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

Add React Report Viewer component to the application

Replace the default code of src\App.js with the following code

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;

Run and test the application

Running the npm start or yarn start commands could fail with the fatal error that the JavaScript heap is out of memory. In that case, open the package.json file and replace the start script with the following one.

react-scripts --max_old_space_size=8192 start

Then re-run npm start or yarn start command. If the command fails with the error like the one below, delete the node_modules folder and run npm install or yarn to re-install all the required packages. Then run npm start or yarn start again.

> react-scripts start

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'react'

When the application starts, the ActiveReportsJS Viewer component will appear on the page. The viewer will display the report that shows "Hello, ActiveReportsJS Viewer" text. You can test the basic functionality by using buttons on the toolbar or exporting the report to one of the available formats.