@grapecity/activereports-react

ActiveReportsJS React Wrapper

This package is a part of the ActiveReportsJS and provides react wrapper for ARJS Viewer Component

Usage Example

1. Install create-react-app global tool using following command:

npm install create-react-app -g

1. Create new application and navigate to the application folder:

create-react-app arjs-react
cd arjs-react

1. Add reference to ActiveReportsJS React module:

npm install @grapecity/activereports-react

1. Put the following source code to src/App.js file:

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

class App extends React.Component {
  _viewer = Viewer;

  render() {
      return (
      <div className="demo-app" style={{ height: '800px'}} >
        <Viewer report={{ Uri: {
        "Name": "Report",
        "Type": "report",
        "Width": "9.7215in",
        "Body": {
          "Name": "Body",
          "Type": "section",
          ReportItems: [
            { Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReports", Height: "10in" }
          ]
        }
} }}/>
      </div>
      );
  }
}

export default App;

1. Start application

npm start

Documentation

For more information on how to use ActiveReportsJS and available tools, refer to the Documentation or API reference for guidance.