Integration with React

This tutorial will help you integrate Flexmonster with React.

To test Flexmonster in a ready-to-use React application, use our sample project.

Prerequisites

Node.js 14 or later
Flexmonster CLI
Install it with the following command:
```
npm install -g flexmonster-cli
```

Step 1. (optional) Create a React application

Skip this step if you already have a React app.

Create a React app by running the following commands in the console. You can choose between ES6 and TypeScript projects:

ES6

npx create-react-app flexmonster-project
cd flexmonster-project

TypeScript

npx create-react-app flexmonster-project --template typescript
cd flexmonster-project

Step 2. Get Flexmonster

To get Flexmonster for React, run the following command inside your project:

flexmonster add react-flexmonster

This command downloads the react-flexmonster wrapper to node_modules/ and adds it as a dependency to package.json.

Step 3. Embed Flexmonster

Step 3.1. Import Flexmonster styles (e.g., in src/index.css):

@import "flexmonster/flexmonster.css";

Step 3.2. Include the FlexmonsterReact component into your React project.

ES6

Add the following import statement to src/App.js:

import * as FlexmonsterReact from "react-flexmonster";

TypeScript

Add the following import statement to src/App.tsx:

import * as FlexmonsterReact from "react-flexmonster";

Step 3.3. You can now use Flexmonster in your React project.

ES6

Insert a pivot table into src/App.js:

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

TypeScript

Insert a pivot table into src/App.tsx:

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

The toolbar is one of the FlexmonsterReact.Pivot props. Learn more about the FlexmonsterReact.Pivot component.

Step 4. Run the application

Run your application from the console:

npm start

Open your project in the browser to see the result.

Usage examples

We prepared the following examples of Flexmonster usage:

Use Flexmonster with React Hooks

Step 1. To use Flexmonster Pivot with React Hooks, import FlexmonsterReact as a class component:

import * as FlexmonsterReact from "react-flexmonster";

Step 2. Embed Flexmonster into your React Hooks component:

import React from "react";
import * as FlexmonsterReact from "react-flexmonster";

function PivotTableHooks (props) {
  const ref = React.useRef();

  const onReportComplete = () => {
    console.log("The report is ready!", ref.current.flexmonster.getReport()); 
  }

  return <>
    <div className="App">
      <FlexmonsterReact.Pivot
       ref={ref}
       toolbar={true}         
       report="https://cdn.flexmonster.com/reports/report.json"
       reportcomplete={onReportComplete}
      />
    </div>
  </>;    
}

export default PivotTableHooks;

In the example above, notice this line:

console.log("The report is ready!", ref.current.flexmonster.getReport());

It demonstrates how to call Flexmonster methods when using React Hooks. Here is the full list of Flexmonster API calls.

Integration with React

Prerequisites

Step 1. (optional) Create a React application

ES6

TypeScript

Step 2. Get Flexmonster

Step 3. Embed Flexmonster

ES6

TypeScript

ES6

TypeScript

Step 4. Run the application

Usage examples

Use Flexmonster with React Hooks

See also