@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-ui.css';
import '@grapecity/activereports/styles/ar-js-viewer.css';

function App() {

  const report = {
    "Name": "Report",
    "Type": "report",
    "Width": "9.7215in",
    "Body": {
      "Name": "Body",
      "Type": "section",
      ReportItems: [
        { Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReports", Height: "10in" }
      ]
    }
  };

  return (
    <div className="demo-app" style={{ height: '800px'}} >
      <Viewer report={{ Uri: report }} />
    </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.