☝️Small business or a startup? See if you qualify for our special offer.
+
All documentation
Connecting to data source

Using methods and events

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.

Prerequisites

  • A React application with Flexmonster embedded into it.
    If Flexmonster is not yet embedded, see Integration with React.

Get a reference to the Flexmonster instance

To interact with Flexmonster through code, you need a reference to the FlexmonsterReact.Pivot instance.

Get the reference using the useRef hook:

ES6

​​import { useRef } from "react";

function App() {
const pivotRef = useRef(null);

return (
<div className="App">
<FlexmonsterReact.Pivot
ref={pivotRef}
toolbar={true}
/>
</div>
);
}

TypeScript

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.

Use methods

Call Flexmonster methods using the previously created pivotRef:

ES6

pivotRef.current.flexmonster.setReport(report);

TypeScript

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.

Use events

There are two ways to subscribe to Flexmonster events:

You can also unsubscribe from an event.

Subscribing to an event via the FlexmonsterReact.Pivot props

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:

Inline handler

<FlexmonsterReact.Pivot
  toolbar="true"
  beforetoolbarcreated={toolbar => {
    toolbar.showShareReportTab = true;
  }}
/>

Handler passed as a variable

<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.

Subscribing to an event via the on() method

Use the previously created pivotRef to call the on() method:

ES6

pivotRef.current.flexmonster.on("reportcomplete", onReportComplete);

TypeScript

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.

Unsubscribing from an event

Use the off() method to unsubscribe from an event:

ES6

pivotRef.current.flexmonster.off("reportcomplete");

TypeScript

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():

ES6

pivotRef.current.flexmonster.off("reportcomplete", onReportComplete);

TypeScript

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:

See also