Using methods and events

This guide explains how to use Flexmonster methods and events in a Next.js 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 Next.js application with Flexmonster embedded into it.
If Flexmonster is not yet embedded, see Integration with Next.js.

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. Ensure the Next.js page (e.g., App) that uses Flexmonster API is a Client Component and dynamically imports the PivotWrapper component:

"use client"
import dynamic from "next/dynamic";

const PivotWrapper = dynamic(() => import("@/app/PivotWrapper"), {
  ssr: false,
  loading: () => <p>Loading Flexmonster...</p>
});

// Other code

The PivotWrapper is a wrapper for FlexmonsterReact.Pivot. See how the PivotWrapper is created when embedding Flexmonster into a Next.js app.

Step 2. In the same component (e.g., App), import the forwardRef, ForwardedRef, and Pivot. Then create an additional ForwardRefPivot wrapper (if needed, you can name this wrapper differently):

import { 
  forwardRef, 
  ForwardedRef 
} from "react";
import { Pivot } from "react-flexmonster";

const ForwardRefPivot = forwardRef<Pivot, Flexmonster.Params>(
  (props, ref?: ForwardedRef<Pivot>) => <PivotWrapper {...props} pivotRef={ref}/>
)

The ForwardRefPivot is needed to pass a ref to the PivotWrapper so you can use the Flexmonster API.

Step 3. Import the useRef and RefObject. Then create an empty ref object (e.g., pivotRef):

import { 
  forwardRef, 
  ForwardedRef, 
  useRef, 
  RefObject 
} from "react";
// ...
export default function App() {
  const pivotRef: RefObject<Pivot> = useRef<Pivot>(null);
  // ...
}

Step 4. Pass the created object (e.g., pivotRef) as the ref attribute to ForwardRefPivot:

export default function App() {
  const pivotRef: RefObject<Pivot> = useRef<Pivot>(null);

  return (
    <div className="App">
      <ForwardRefPivot
        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);

Some methods can also be defined as the component's props:

<ForwardRefPivot
 ref={pivotRef}
 toolbar={true}
 customizeCell={customizeCellFunction}
/>

Such methods include:

Check out the sample Next.js 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:

Via the component's props
Via the on() method

You can also unsubscribe from an event.

Define an event as the component's prop and assign an event handler to it:

<ForwardRefPivot
 ref={pivotRef}
 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

<ForwardRefPivot
  ref={pivotRef}
  toolbar="true"
  beforetoolbarcreated={toolbar => {
    toolbar.showShareReportTab = true;
  }}
/>

Handler passed as a variable

<ForwardRefPivot
  ref={pivotRef}
  toolbar="true"
  beforetoolbarcreated={customizeToolbar}
/>

The sample Next.js 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);

See how the on() method is used in the sample Next.js project.

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");

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);

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 Next.js project.