ActiveReportsJS, React Reporting Component

The Choice of React Developers Worldwide for Frontend Reporting Solution Development

Create and deploy reports quickly and easily in your React applications using ActiveReportsJS, a React-based business reporting component.

Why ActiveReportsJS

Why Choose ActiveReportsJS for React App?

Powerful Data Binding

ActiveReportsJS supports REST API, OData, and GraphQL bindings, allowing you to quickly and easily connect to JSON-formatted data.

Support for React, Next.js and Vite

ActiveReportsJS supports React v16 or higher, Next.js v13 or higher, and Vite v2 or higher. Develop web reports more efficiently using popular JavaScript frameworks.

No Server Dependency

You can integrate the ActiveReportsJS reporting engine into your frontend applications using NPM packages, CDN hosting, or app-hosted JavaScript code with no server-side dependencies.

Client-Side Export and Printing

Quickly generate WYSIWYG reports on the client side and export them to PDF, HTML, and CSV formats. This allows end users to print complete JavaScript reports.

Support for Various Report Types

You can create reports in a format that suits your needs, such as continuous page layout, fixed page layout, etc.

Interactive JS Report Design

Drilldown, drillthrough, interactive sorting, and bookmarking features allow you to interact and provide more specific information to your end users.

Quick Start

Getting Started with ActiveReportsJS in React 🚀

 As the React ecosystem evolves, React now recommends using modern React-based frameworks like Next.js and Vite when building new applications or websites.

Getting Started with ActiveReportsJS in Next.js

Getting Started with ActiveReportsJS in Vite (React)

Creating reports using the ActiveReportsJS Designer

1. After downloading the ActiveReportsJS file, install and run the designer program.

* The designer program installation file is located in the designer folder of the downloaded file.

2. Create the report you want using the designer.

After adding the data source and designing the report, save the generated report as "report.rdlx-json"

(you can change the file name to whatever you like).


Place the saved report in the public folder of your React app.

Adding the ActiveReportsJS Viewer to a React Application

 * The guide below shows you how to create a new React application using the Create React App tool.

1. Create a React application with default options by running the following command in a command prompt or terminal:

// If you use npm:

npm init react-app arjs-react-viewer-app


// If you use yarn:

yarn create react-app arjs-react-viewer-app

2. Add the ActiveReportsJS React module and report viewer to your application.

 1) Once the React application has finished initializing, navigate to the arjs-react-viewer-app folder using the cd command in your command prompt or terminal.

cd arjs-react-viewer-app

 2) Once you've moved to the arjs-react-viewer-app folder, run the following command to install the latest version of the package.

*The React report viewer component is distributed via the @mescius/activereportsjs-react package.

// If you use npm:

npm install @mescius/activereportsjs-react


// If you use yarn:

yarn add @mescius/activereportsjs-react

 3) Open the src/App.js file, add a host element, and import the report.rdlx-json file created above.

* Please set the report name dynamically according to the previously created file.

import  React  from  "react";

import  "./App.css";

import { Viewer } from  "@mescius/activereportsjs-react";


function App() {

  return (

  <div id="viewer-host">

   <Viewer report={{ Uri: 'report.rdlx-json' }} />

  </div>

 );

}


export default  App;

3. Add styles to the viewer-host element.

 Open the src/App.css file and replace the code with the CSS style below.

@import "@mescius/activereportsjs/styles/ar-js-ui.css";

@import  "@mescius/activereportsjs/styles/ar-js-viewer.css";


#viewer-host  {

 width:  100%;

 height:  100vh;

}

4. Add packages and files to easily change the React environment with Craco.

1) Install the Craco package into your application.

npm i -D @craco/craco

 2) Create a craco.config.js file and insert the code below.

5. Open the package.json file and change the react-script content to craco as shown below.

"scripts": {

 "start": "craco start",

 "build": "craco build",

"test": "craco test",

"eject": "eject the crack"

}

Please check the sample below for the full code.

6. Run the React app and check the results.

Run it using the npm start or yarn start command.

npm start

View More

For React Developers

Recommended Tutorial for Beginners to ActiveReportsJS

View More

ActiveReportsJS Starter Template

Jump-Start Your Development with Customizable Samples and templates.

A variety of templates and samples using ActiveReportsJS. You can view live demos and download them to customize and use yourself.

  • Certificate of Employment

    This is a sample Certificate of Employment, an official document verifying an employee’s employment status, including department, position, date of joining, and period of employment.


    Download .rdlx-json file

    View Demo
    Read More

  • Blood Test Report

    This is a sample Blood Test Report, a document that organizes various blood parameters to assess a patient’s health or detect the presence of diseases, including detailed blood test results.


    Download .rdlx-json file

    View Demo
    Read More

  • Transfer Confirmation Receipt

    This is a sample Transfer Confirmation Receipt, a document that verifies a bank account transfer has been successfully processed, showing details such as the account and transfer amount.


    Download .rdlx-json file

    View Demo
    Read More

  • Inventory Investigation Report

    This is a sample inventory report, a document used to determine the current inventory status of products or materials held by a company. It records information on inventory status by item.


    Download .rdlx-json file

    View Demo
    Read More

  • Transaction Statement

    This is a sample transaction statement, a document that records transaction details between suppliers and business partners, including the items transacted, quantity, and unit price.


    Download .rdlx-json file

    View Demo
    Read More

  • High-Speed Ferry Mobile e-Ticket

    This is a sample high-speed vessel mobile e-ticket, designed to allow customers who purchased tickets using mobile e-tickets and conveniently check high-speed vessel-related information on their mobile devices.


    Download .rdlx-json file

    View Demo
    Read More

  • High-Speed Ship e-Ticket

    This is a sample high-speed vessel e-ticket (e-ticket) containing customer information and high-speed vessel-related details for purchasing a ticket using an e-ticket for high-speed vessels.


    Download .rdlx-json file

    View Demo
    Read More

  • Water Quality Test Report

    This sample water quality test report serves as a document confirming that the water provided is safe and meets regulatory standards, providing consumers with confidence and demonstrating the sanitary management status of public facilities.


    Download .rdlx-json file

    View Demo
    Read More

  • Cosmetics Test Report

    This is a sample cosmetics test report that verifies the safety and reliability of ingredients in cosmetics.


    Download .rdlx-json file

    View Demo
    Read More

  • Electronic Ticket Issuance Confirmation

    This is a sample e-ticket issuance confirmation document issued to passengers who have purchased a ticket, containing boarding information and instructions.


    Download .rdlx-json file

    View Demo
    Read More

  • Graduation Certificate

    This is a sample graduation certificate used to officially prove graduation.


    Download .rdlx-json file

    View Demo
    Read More

  • Tax Invoice

    This is a sample tax invoice required to prove a transaction and calculate value-added tax.


    Download .rdlx-json file

    View Demo

  • Estimate

    Here's a sample quotation, including pricing information, terms and conditions, supplier and purchaser information, and more.


    Download .rdlx-json file

    View Demo

  • Transcript

    This is a sample transcript that officially certifies a student's academic performance.


    Download .rdlx-json file

    View Demo

  • Customer List

    This sample was created to display customer information using a fixed page layout.


    Download .rdlx-json file

    View Demo
Want More Templates & Samples?

Visit our ActiveReportsJS online tutorial showcase!