@grapecity/activereports-react

ActiveReportsJS components for React

Usage no npm install needed!

<script type="module">
  import grapecityActivereportsReact from 'https://cdn.skypack.dev/@grapecity/activereports-react';
</script>

README

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.