ActiveReportsJS in React

Following are the prerequisites before you start using ActiveReportsJS in React framework.


  • Node.js
  • Yarn
  • Create React App - Install the global tool for React application using
   npm install create-react-app -g


   yarn global add create-react-app

The following steps show how to view an existing report in a React application.

  1. Create a new React application by typing following command in command console
   create-react-app arjs-react
  1. Make this directory your working directory
   cd arjs-react
  1. Install the following ActiveReportsJS React modules in the project
   npm install @grapecity/activereports-react


   yarn add @grapecity/activereports-react
  1. Install localization module
   npm install @grapecity/activereports-localization


   yarn add @grapecity/activereports-localization
  1. Place the report you want to view (for example, InvoiceList.rdlx-json) in the 'public' folder of the application.
  2. Modify 'src/App.js' file to import required stylesheet and scripts
   import React from 'react';
   import '@grapecity/activereports/styles/ar-js-viewer.css';
   import {} from '@grapecity/activereports-localization';
   import { Viewer } from '@grapecity/activereports-react';
   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

   class App extends React.Component {
    _viewer = Viewer;

    render() {
         return (<div className="demo-app" style={{ height: '1000px'}} >
                      report={{ Uri: "InvoiceList.rdlx-json" }}
                      language = 'ja' />
  export default App;

Note that the export capabilities are added in viewer using the following import statement

   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

These modules are also required to allow export of report without using viewer. See Export topic for more information.

  1. In the command console, type following command to run the application
   npm start


   yarn start

You will get a running application in the browser (localhost:3000).

Refer to the React Component topic for more details on using ActiveReportsJS in React applications.