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. Follow the steps below to get the reference:

Step 1. Import the useRef hook from React:

import { useRef } from "react";

Step 2. Using the useRef hook, create an empty ref object (e.g., pivotRef):

function App() {
  const pivotRef = useRef(null);
  // ...
}

function App() {
  const pivotRef: React.RefObject<FlexmonsterReact.Pivot> 
    = useRef<FlexmonsterReact.Pivot>(null);
  // ...
}

Step 3. Pass the created object (e.g., pivotRef) as the ref attribute to FlexmonsterReact.Pivot:

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

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

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:

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:

• customizeAPIRequest
• customizeCell
• customizeChartElement
• customizeContextMenu
• sortFieldsList

Check out the sample React project for more examples with Flexmonster methods:

• React + ES6
• React + TypeScript

See the full list of Flexmonster methods.

Use events

There are two ways to subscribe to Flexmonster events:

• Via the FlexmonsterReact.Pivot props
• Via the on() method

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:

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

• React + ES6
• React + TypeScript

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:

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

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

See how the on() method is used in the sample React project:

• React + ES6
• React + TypeScript

Check out the full list of Flexmonster events.

Unsubscribing from an event

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:

• React + ES6
• React + TypeScript

See also

• Flexmonster methods
• Flexmonster events
• Usage examples
• About the FlexmonsterReact.Pivot component