Need a special offer?Find out if your project fits.
+
  1. API reference
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Table of contents

    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

    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.

    See also