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.

    If you are using React with Next.js, see Integration with Next.js.

    Prerequisites

    Step 1. (optional) Create a React application

    Skip this step if you already have a React app.

    Step 1.1. Create a React app from the console using Vite. You can choose an ES6 or a TypeScript project template:

    ES6

    # For npm 7 and later
    npm create vite@latest flexmonster-project -- --template react
    
    # For npm 6
    npm create vite@latest flexmonster-project --template react

    TypeScript

    # For npm 7 and later
    npm create vite@latest flexmonster-project -- --template react-ts
    
    # For npm 6
    npm create vite@latest flexmonster-project --template react-ts

    Step 1.2. Install npm dependencies needed for the project:

    cd flexmonster-project
    npm install

    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

    ES6

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

    @import "flexmonster/flexmonster.css";

    Step 3.2. Import the FlexmonsterReact component (e.g., into src/App.jsx):

    import * as FlexmonsterReact from "react-flexmonster";

    Step 3.3. Insert the FlexmonsterReact.Pivot component (e.g., into src/App.jsx):

    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.

    TypeScript

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

    @import "flexmonster/flexmonster.css";

    Step 3.2. Import the FlexmonsterReact component (e.g., into src/App.tsx):

    import * as FlexmonsterReact from "react-flexmonster";

    Step 3.3. Insert the FlexmonsterReact.Pivot component (e.g., 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 run dev

    Open your project in the browser to see the result.

    Usage examples

    We prepared the following examples of Flexmonster usage:

    See also