[]
DEMO DOCS THEME EDITOR API
DOWNLOAD
(Showing Draft Content)

ActiveReportsJS React Report Viewer Component

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

ActiveReportsJS React NPM package

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

ActiveReportsJS React Report Viewer Component API

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

import { Viewer as ReportViewer } from "@grapecity/activereports-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 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 page for more information
language string sets the language of the Viewer's UI. See Localization page for more information
exportsSettings object sets the export settings. Visit the Export Settings page for more information.
report Object sets the report to load in the Viewer component. See Loading Report section for more information
reportLoaded (args: ReportLoadEventArgs)=>void sets the handler for the event that occurs when a report is loaded but before rendering started
documentLoaded (args: 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

You can bind these input properties to dynamic values to completely overwrite the viewer component's default UI, check Customization page for more information.

Also, the parent component can access methods and properties of the Viewer Class instance class by creating the ref for a Viewer component and using its Viewer property, for example

import { Viewer as ReportViewer } from "@grapecity/activereports-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>
  );
}