React Component

• Supports React version 16.0.0 or higher.

The ActiveReportsJS Viewer component for React allows you to use the viewer in React templates markup.

An ActiveReportsJS Viewer component for React is a wrapper for the ActiveReportsJS Viewer control it represents. The ActiveReportsJS Viewer component creates the viewer control behind the scenes, and provides a reference to the control, along with providing options to configure the control and events declaratively in the React JSX syntax.

ActiveReportsJS Viewer component for React is shipped as a separate NPM package. The latest version of the package can be installed from NPM by executing the following command from NodeJS command prompt:

npm install @grapecity/activereports-react

See this topic for more details about ActiveReportsJS NPM packages.

After that you can import React component using ESM import statements. For example, this import statement imports the ActiveReportsJS Viewer component for React:

import { Viewer } from '@grapecity/activereports-react';

Import ActiveReportsJS Viewer component for React

With this setup, you can import ActiveReportsJS Viewer React module and use the component it provides. For example, this code adds a ActiveReportsJS Viewer component to App component's JSX:

import React from 'react';
import '@grapecity/activereports/styles/ar-js-viewer.css';
import { Viewer } from '@grapecity/activereports-react';
import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

   class App extends React.Component {
    _viewer = Viewer;

    render() {
         return (<div className="demo-app" style={{ height: '1000px'}} >
                    <Viewer
                      report={{ Uri: "InvoiceList.rdlx-json" }} // event binding
                      sidebarVisible={true} toolbarVisible zoom='100%' /> // binding to boolean
                    </div>);
    }
  }
export default App;

If you want to add export capabilities in the viewer, add the export providers using the following import statement.

import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

Create ActiveReportsJS Viewer control in code

ActiveReportsJS Viewer component for React is intended to be used in React JSX. If you want to create its control in code, you should use the control from '@grapecity/activereports' module, instead of '@grapecity/activereports-react'. Note that the module has the same name as a corresponding React interop module, but without the "-react" word in the name. The following code creates a ActiveReportsJS Viewer control in code:

import { Viewer } from '@grapecity/activereports';
var v = new Viewer.Viewer('#ARJSviewerDiv');