(Showing Draft Content)

Using ActiveReportsJS Report Designer Component in React applications

Create React Application

The easiest way to create a new React application is running Create React App, for example, by using the npx package runner tool:

npx create-react-app arjs-designer-app

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

Install ActivereportsJS

The report designer component is part of @grapecity/activereports npm package. To install the current version, run the following command from the application's root folder.

npm install @grapecity/activereports

Alternatively, if using yarn:

yarn add @grapecity/activereports

Add the Designer Host component

Add DesignerHost.js (or DesignerHost.ts if you are using typescript) file in the React application's src folder.

Add the required imports to DesignerHost.js(ts)

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-designer.css";

Add a function that initializes the Report Designer. This function accepts the CSS selector of the hosting component.

const initDesigner = (designerHostSelector) => {
  new ReportDesigner(designerHostSelector);

Add a functional component to DesignerHost.js(ts)

export const DesignerHost = () => {
  React.useEffect(() => initDesigner("#designer-host"), []);
  return <div id="designer-host"></div>;

This component invokes the initDesigner function once the first rendering of the component completes, and adds the designer to the #designer-host element's child nodes.

Add style for the designer-host element to index.css file:

#designer-host {
  margin: 0 auto;
  width: 100%;
  height: 100vh;

Add DesignerHost component to the application

Replace the default code of App.js(ts) with the following code

import React from "react";
import "./App.css";
import { DesignerHost } from "./DesignerHost";

function App() {
  return <DesignerHost />;

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=4096 start

Then re-run npm start or yarn start command. The ActiveReportsJS Designer component will appear on the start page of the application. Test the basic functionality by adding controls, setting their properties, creating the data source, et cetera.Visit the Developer Guide and the Online Demo for more information on how to use the Report Designer component.