We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • 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):

    ES6

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

    TypeScript

    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:

    ES6

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

    TypeScript

    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