Stimulsoft Reports.JS is a reporting tool for React
Data analytics tool for creating dashboards - Stimulsoft Dashboard.JS NPM, GitHub
npm install stimulsoft-reports-js-react
`Designer Component
The Designer component is a React component for integrating Stimulsoft Reports Designer into your React applications. It provides a wide range of properties and event handlers to customize the behavior and appearance of the designer.Usage
Here is an example of how to use the Designer component in your React application:`tsx
import React from 'react';
import { Designer, Stimulsoft } from 'stimulsoft-reports-js-react';const App = () => {
const handleSaveReport = (args, callback) => {
console.log('Saving report:', args);
};
return (
report={new Stimulsoft.Report.StiReport()}
visible={true}
options={new Stimulsoft.Designer.StiDesignerOptions()}
id="designer1"
onSaveReport={handleSaveReport}
/>
);
};
export default App;
`Properties
The Designer component accepts the following properties:| Property | Description |
|-----------------------|--------------------------------------------------------------------------|
|
report | The report object to be edited in the designer. |
| visible | Determines whether the designer is visible. |
| options | Configuration options for the designer. |
| id | Unique identifier for the designer instance. |Events
The Designer component provides the following event handlers:| Event | Description |
|-----------------------|--------------------------------------------------------------------------|
|
onPrepareVariables | Triggered to prepare variables. |
| onBeginProcessData | Triggered at the beginning of data processing. |
| onEndProcessData | Triggered at the end of data processing. |
| onCreateReport | Triggered when a new report is created. |
| onCloseReport | Triggered when a report is closed. |
| onOpenReport | Triggered when a report is opened. |
| onOpenedReport | Triggered after a report is opened. |
| onSaveReport | Triggered when a report is saved. |
| onSaveAsReport | Triggered when a report is saved as a new file. |
| onPreviewReport | Triggered when a report is previewed. |
| onExit | Triggered when the designer is exited. |
| onAssignedReport | Triggered when a report is assigned to the designer. |Viewer Component
The Viewer component is a React component for integrating Stimulsoft Reports Viewer into your React applications. It allows you to display and interact with reports.Usage
Here is an example of how to use the Viewer component in your React application:`tsx
import React from 'react';
import { Viewer, Stimulsoft } from 'stimulsoft-reports-js-react';const App = () => {
const handlePrintReport = (args, callback) => {
console.log('Printing report:', args);
};
return (
report={new Stimulsoft.Report.StiReport()}
visible={true}
options={new Stimulsoft.Viewer.StiViewerOptions()}
id="viewer1"
onPrintReport={handlePrintReport}
/>
);
};
export default App;
`Properties
The Viewer component accepts the following properties:| Property | Description |
|-----------------------|--------------------------------------------------------------------------|
|
report | The report object to be displayed in the viewer. |
| visible | Determines whether the viewer is visible. |
| options | Configuration options for the viewer. |
| id | Unique identifier for the viewer instance. |Events
The Viewer component provides the following event handlers:| Event | Description |
|-----------------------|--------------------------------------------------------------------------|
|
onPrepareVariables | Triggered to prepare variables. |
| onBeginProcessData | Triggered at the beginning of data processing. |
| onEndProcessData | Triggered at the end of data processing. |
| onPrintReport | Triggered when a report is printed. |
| onBeginExportReport | Triggered at the beginning of report export. |
| onEndExportReport | Triggered at the end of report export. |
| onInteraction | Triggered during report interaction. |
| onEmailReport | Triggered when a report is emailed. |
| onDesignReport | Triggered when a report is sent to the designer. |
| onShowReport | Triggered when a report is shown. |
| onOpenReport | Triggered when a report is opened. |
| onOpenedReport` | Triggered after a report is opened. |Also, we prepared many videos about the working of our software. Watch videos on our YouTube channel.