ActiveReportsJS React Report Designer

This page provides a detailed overview of the ActiveReportsJS React Report Designer. You can check the Get Started tutorial for a concise guide for integrating the designer component into a React application.

ActiveReportsJS React NPM package

We distribute the library that contains the ActiveReportsJS React Report Designer component via the @grapecity/activereports-react npm package. The main @grapecity/activereports package provides the core functionality.

ActiveReportsJS React Designer component

ActiveReportsJS React Designer component can be imported to a JSX(TSX) file and included in a component's rendering tree, for example:

import { Designer } from "@grapecity/activereports-react"; function App() { return ( <div> <Designer /> </div> ); }

The designer component accepts the following properties.

Property	Type	Description
hotkeysEnabled	boolean	indicates whether the save and open hotkeys are enabled
language	string	sets the language of Designer Component interface. Check the Localization page for more information
fontSet	"default" \| "registered" \| "all"	indicates the available font set. Visit the Font Configuration for more information.
dataSources	array of Data Source Templates	sets the Pre-defined data sources and data sets.
reportList	array of Report Resource Info items	sets the Pre-defined report names for a subreport
imageList	array of Image Resource Info items	sets the Pre-defined images for an Image report item
onCreate	onCreate function	adds the New Report button in the designer toolbar and sets the corresponding click handler
onOpen	onOpen function	adds the Open Report button in the designer toolbar and sets the corresponding click handler
onRender	onRender function	adds the Preview Report button in the designer toolbar and sets the corresponding click handler
onSave	onSave function	adds the Save Report button in the designer toolbar and sets the corresponding click handler
onSaveAs	onSaveAs function	adds the Save As.. button in the designer toolbar and sets the corresponding click handler
onOpenFileMenu	onOpenFileMenu function	adds the "File" menu in the designer toolbar and sets the corresponding click handler
report	report object	loads the specified report in the designer
customInitTemplates		sets the report item templates for the designer component
documentChanged	(args: DocumentChangedEventArgs)=>void	sets the handler for the event that occurs when a report loaded into the designer changes

Also, the parent component can use the getReport, setReport, and processCommand methods of the Designer class instance by creating the ref for a Designer component, for example

import { Designer } from "@grapecity/activereports-react"; function App() { const designerRef = React.createRef(); const btnClick = function () { designerRef.current.setReport({id: "report.rdlx-json"}); }; return ( <div id="designer-host"> <button type="button" onClick={btnClick}> Open Report </button> <Designer ref={designerRef} /> </div> ); }