This tutorial will help you integrate Flexmonster with React.
To test Flexmonster in a ready-to-use React application, use our sample project.
npm install -g flexmonster-cli
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:
npx create-react-app flexmonster-project cd flexmonster-project
npx create-react-app flexmonster-project --template typescript cd flexmonster-project
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.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.
Add the following import statement to src/App.js
:
import * as FlexmonsterReact from "react-flexmonster";
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.
Insert a pivot table into src/App.js
:
function App() { return ( <div className="App"> <FlexmonsterReact.Pivot toolbar={true} /> </div> ); }
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.
Run your application from the console:
npm start
Open your project in the browser to see the result.
We prepared the following examples of Flexmonster usage:
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.