# ActiveReportsJS Report Viewer Wrapper for React

Learn how to use ActiveReportsJS Report Viewer wrapper for React

## Content

This page provides a detailed overview of ActiveReportsJS Report Viewer Wrapper for React. You can check [Get Started](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/QuickStart-React) tutorial for a concise guide for integrating this wrapper to a React application.

### ActiveReportsJS React NPM package

We distribute the library that contains the ActiveReportsJS Report Viewer Wrapper for React 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 Viewer component

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

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

The viewer component accepts the following properties.

| Property | Type | Default Value | Description |
| -------- | ---- | ------------- | ----------- |
| availableExports | Array of strings |  | sets the list of exports that should be available in the viewer UI. See [Exports](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export#enable-report-viewer-export-sidebar-in-react-applications) page for more information |
| mouseMode | 'Pan' \| 'Selection' | 'Pan' | sets the mouse mode of Viewer component. |
| renderMode | 'Galley' \| 'Paginated' | 'Paginated' | sets the render mode of Viewer component |
| viewMode | 'Continuous' \| 'SinglePage' | 'Continuous' | sets the view mode of Viewer component |
| zoom | 'FitWidth' \| 'FitPage' \| number | 100 | sets the zoom mode of Viewer component |
| fullscreen | boolean | false | indicates whether the Viewer component should display the content in Full-Screen mode |
| toolbarVisible | boolean | true | indicates whether the toolbar of Viewer component is visible or not |
| sidebarVisible | boolean | true | indicates whether the sidebar of Viewer component is visible or not |
| panelsLayout | 'sidebar' \| 'toolbar' | 'toolbar' | indicates the location of Search and Export functions within the UI of Viewer component |
| parameterPanelLocation | 'default' \| 'top' \| 'bottom' | 'default' | indicates the location of the Parameters bar within the UI of Viewer component |
| toolbarLayout | Object |  | sets the list of available toolbar items. See [Customization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization) page for more information |
| language | string |  | sets the language of the Viewer's UI. See [Localization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Localization) page for more information |
| exportsSettings | object |  | sets the export settings. Visit the [Export Settings](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) page for more information. |
| report | Object |  | sets the report to load in the Viewer component. See [Loading Report](/activereportsjs/docs/v6.1/) section for more information |
| reportLoaded | (args: [ReportLoadEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportViewer#reportloadeventargs))=>void |  | sets the handler for the event that occurs when a report is loaded but before rendering started |
| documentLoaded | (args: [DocumentLoadEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportViewer#documentloadeventargs))=>void |  | sets the handler for the event that occurs when a report rendering is completed |
| errorHandler | ()=> void |  | sets the handler for the event that occurs if report rendering causes an error |
| showParametersOnOpen | 'auto'\|'always' | 'auto' | the `auto` value indicates that the `Parameters Panel` should open automatically upon report loading, even if the report's parameters have default values. |
| animations | AnimationSettings |  | Specifies the animation configuration | 
| themeConfig | UIThemeConfig |  | Specifies the theme configuration | 
| theme | ColorTheme or built-in theme ID |  | Specifies the active theme | 

You can bind these input properties to dynamic values to completely overwrite the viewer component's default UI, check [Customization page](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization) for more information.
Furthermore, the parent component can access [methods and properties of the Viewer Class instance](https://developer.mescius.com/activereportsjs/api/classes/ReportViewer.Viewer) class by creating the `ref` for a Viewer component and using its `Viewer` property, for example

```javascript
import { Viewer as ReportViewer } from "@mescius/activereportsjs-react";
function App() {
  const viewerRef = React.createRef();
  const btnClick = function () {
    viewerRef.current.Viewer.toggleFullScreen();
  };
  return (
    <div id="viewer-host">
      <button type="button" onClick={btnClick}>
        Full Screen
      </button>
      <ReportViewer ref={viewerRef} />
    </div>
  );
}
```

### Related links

* [Live demo](/activereportsjs/demos/features/viewer-integration/react)
* [Loading reports](/activereportsjs/docs/v6.1/)
* [Customization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization)
* [Localization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Localization)
* [Print](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Print)
* [Export](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export)
* [Themes](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Themes)