[]
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
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 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;
}
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;
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.