This guide explains how to use Flexmonster methods and events in a React application. First, we will get a reference to the Flexmonster instance. Then we will use this reference to call methods and subscribe to events.
To interact with Flexmonster through code, you need a reference to the FlexmonsterReact.Pivot instance.
Get the reference using the useRef hook:
import { useRef } from "react";
function App() {
const pivotRef = useRef(null);
return (
<div className="App">
<FlexmonsterReact.Pivot
ref={pivotRef}
toolbar={true}
/>
</div>
);
}
import { useRef } from "react";
function App() {
const pivotRef: React.RefObject<FlexmonsterReact.Pivot>
= useRef<FlexmonsterReact.Pivot>(null);
return (
<div className="App">
<FlexmonsterReact.Pivot
ref={pivotRef}
toolbar={true}
/>
</div>
);
}
The pivotRef
reference to the FlexmonsterReact.Pivot
instance is created.
In this guide, we will use the pivotRef.current.flexmonster
property, which is a reference to the Flexmonster instance. The pivotRef.current.flexmonster
gives you access to Flexmonster API.
Call Flexmonster methods using the previously created pivotRef:
pivotRef.current.flexmonster.setReport(report);
pivotRef.current?.flexmonster.setReport(report);
Some methods can also be defined as FlexmonsterReact.Pivot props:
<FlexmonsterReact.Pivot
ref={pivotRef}
toolbar={true}
customizeCell={customizeCellFunction}
/>
Such methods include:
Check out the sample React project for more examples with Flexmonster methods:
See the full list of Flexmonster methods.
There are two ways to subscribe to Flexmonster events:
You can also unsubscribe from an event.
Define an event as the FlexmonsterReact.Pivot
prop and assign an event handler to it:
<FlexmonsterReact.Pivot
report="https://cdn.flexmonster.com/reports/report.json"
reportcomplete={onReportComplete}
/>
Handlers can be passed as inline JavaScript code or as variables. In both cases, curly braces should be used:
<FlexmonsterReact.Pivot
toolbar="true"
beforetoolbarcreated={toolbar => {
toolbar.showShareReportTab = true;
}}
/>
<FlexmonsterReact.Pivot
toolbar="true"
beforetoolbarcreated={customizeToolbar}
/>
The sample React project demonstrates how to subscribe to events via the component’s props:
See the full list of Flexmonster events.
Use the previously created pivotRef to call the on() method:
pivotRef.current.flexmonster.on("reportcomplete", onReportComplete);
pivotRef.current?.flexmonster.on("reportcomplete", onReportComplete);
See how the on()
method is used in the sample React project:
Check out the full list of Flexmonster events.
Use the off() method to unsubscribe from an event:
pivotRef.current.flexmonster.off("reportcomplete");
pivotRef.current?.flexmonster.off("reportcomplete");
This will remove all handlers from the event. To remove a specific handler, pass its name as a second parameter to off()
:
pivotRef.current.flexmonster.off("reportcomplete", onReportComplete);
pivotRef.current?.flexmonster.off("reportcomplete", onReportComplete);
Note If a handler is specified as an anonymous function, you can remove it only by removing all handlers.
See how the off()
method is used in the sample React project: