# ActiveReportsJS React Report Designer

Learn how to use ActiveReportsJS React Report Designer

## Content

This page provides a detailed overview of the ActiveReportsJS React Report Designer. You can check the [Get Started](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-React) 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 [@mescius/activereportsjs-react](https://www.npmjs.com/package/@mescius/activereportsjs-react) npm package. The main [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 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:

```javascript
import { Designer } from "@mescius/activereportsjs-react";
function App() {
  return (
    <div>
      <Designer />
    </div>
  );
}
```

The designer component accepts the following properties.

| Property | Type | Description |
| -------- | ---- | ----------- |
| onInit | ()=>[DesignerConfig](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) | returns the [DesignerConfig](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) object that contains the designer's initialization options |
| customInitTemplates |  | **Obsolete**: use the `onInit` callback instead. |
| hotkeysEnabled | boolean | **Obsolete**: use the `onInit` callback instead. |
| language | string | **Obsolete**: use the `onInit` callback instead. |
| fontSet | "default" \| "registered" \| "all" | **Obsolete**: use the `onInit` callback instead. |
| dataSources | array of [Data Source Templates](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#datasourcetemplate) | sets the [Pre-defined data sources and data sets](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Add-Predefined-Datasources-Datasets). |
| reportList | array of [Report Resource Info items](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#reportresourceinfo) | sets the [Pre-defined report names for a subreport](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources) |
| imageList | array of [Image Resource Info items](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#imageresourceinfo) | sets the [Pre-defined images for an Image report item](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources) |
| onCreate | [onCreate function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#oncreate) | adds the [New Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-new-report-button) in the designer toolbar and sets the corresponding click handler |
| onOpen | [onOpen function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopen) | adds the [Open Report](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-open-report-button) button in the designer toolbar and sets the corresponding click handler |
| onRender | [onRender function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onrender) | adds the [Preview Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Preview-Reports) in the designer toolbar and sets the corresponding click handler |
| onSave | [onSave function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsave) | adds the [Save Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports) in the designer toolbar and sets the corresponding click handler |
| onSaveAs | [onSaveAs function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsaveas) | adds the [Save As.. button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports) in the designer toolbar and sets the corresponding click handler |
| onOpenFileMenu | [onOpenFileMenu function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopenfilemenu) | adds the "File" menu in the designer toolbar and sets the corresponding click handler |
| report | [Report object](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#report) | loads the specified report in the designer |
| 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](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner) by creating the `ref` for a Designer component, for example

```javascript
import { Designer } from "@mescius/activereportsjs-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>
  );
}
```