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

Step 1. Since Flexmonster must be imported and rendered on the client side, ensure the Next.js page that uses Flexmonster API (e.g., App) is a Client Component and dynamically imports the PivotWrapper component with ssr: false:

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

const FlexmonsterPivot = 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 component is created when embedding Flexmonster into a Next.js app.

Step 2. Create an empty ref object (e.g., pivotRef) and pass it as the ref attribute to the Flexmonster wrapper:

import * as React from "react";
import type { Pivot } from "react-flexmonster";

// ...

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

  return (
    <div className="App">
      <FlexmonsterPivot
        ref={pivotRef}
        toolbar={true}
      />
    </div>
  )
}

The pivotRef reference to the Flexmonster instance is created.

In this guide, we will use the pivotRef.current.flexmonster property, which 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:

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

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

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

Handler passed as a variable

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