How to use react-flexmonster hooks and ref

Hello, Tiago!

Thank you for your question.

Please follow these steps for creating and using refs with FlexmonsterPivot:

Using react-flexmonster
You should change the import statement from  import Flexmonster from 'flexmonster' to import * as FlexmonsterReact from 'react-flexmonster'. It will provide you with a ready-to-use package with React wrapper of Flexmonster JS library.
To install react-flexmonster node module, use the following command: 

npm i react-flexmonster

For more information, please see the integration with React tutorial page. 
Also, check or example React + Typescript project with Flexmonster. It contains examples with different use-cases of Flexmonster, including creating & using refs (see UpdatingData.tsx on GitHub). To download and run the project, use this Flexmonster CLI command: 

flexmonster create react typescript -r

Creating ref
To create the ref, you can use the following code inside the React class, using Flexmonster (UpdatingData.tsx, line 7):

private pivotRef: React.RefObject<FlexmonsterReact.Pivot> = React.createRef<FlexmonsterReact.Pivot>();

Use the following code to specify the ref attribute inside the FlexmonsterReact.Pivot component (UpdatingData.tsx, line 84):

ref={this.pivotRef}

Using ref
After following these steps, Flexmosnter API calls can be done from this.pivotRef.current!.flexmonster.

Hope you will find this information helpful.

Best Regards,
Maksym

Hi, Tiago!

We are glad to hear that the solution with dynamic import works for your project. You are welcome to reach out to us if further questions arise.

Best Regards,
Maksym

Hello, Tiago!

Our apologies for the misunderstanding.

We would like to offer a working approach for using react-flexmonster refs in a Next.js project.

The idea behind this solution is:

• Firstly, you should create a separate React component, containing FlexmonterReact.Pivot. Here you can configure Flexmonster and use refs as described earlier in this thread.
• Later, this component can be used in your NextPage. To prevent the app from crashing with `Reference error: window is not defined` on page reload, use dynamic import for the previously created component.

  const PivotTableDemo = dynamic<Flexmonster.Params>(
    () => import('./PivotTableDemo').then((m) => m),
    { ssr: false }
  );

You are welcome to check out a sample project where we tested this approach (see "fm-next-ts.zip" in the attachments). Use the following commands to run the project:

npm install
npm run dev

Please let us know if such an approach would work for your case. Looking forward to your response.

Best Regards,
Maksym

Attachments:

Hello, Tiago!

Hope you are doing well.

We modified the sample project in the way that Flexmosnter is able to receive props outside the PivotTableDemo class. We suggest following these steps to achieve this functionality:

• Change the <FlexmonsterReact.Pivot> inside PivotTableDemo.js, so it retrieves all the props from outside, using the ... operator:

                      <FlexmonsterReact.Pivot
                          ref={this.pivotRef}
                          {...this.props}
                      />

• Now you will be able to pass the Flexmonster params from the NextPage:

        <PivotTableDemo
          toolbar={false}
          report={"https://cdn.flexmonster.com/github/demo-report.json"}
          //...other Flexmonster parameters
        />

You are welcome to check the modified sample project in the attachments.

Please let us know if everything works fine.

Best Regards,
Maksym

Hi, Tiago!

Thank you for your feedback.
We are happy to hear that you found a working solution.
Feel free to contact us if you have more questions.

Best Regards,
Maksym