Flexmonster Software License Agreement (“Agreement”) has been significantly revised and is effective as of September 30, 2024.
The following modifications were made:
The modified version of Flexmonster Software License Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after September 30, 2024, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Flexmonster Software License Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license under License Model or Maintenance after the effective date of any modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
This tutorial will help you integrate Flexmonster with React. Watch the tutorial in the video format: React pivot table guide.
Flexmonster has a 30-day free trial, with no registration required to start the evaluation. You can also test the component using our sample React project or the React pivot table demo.
If you are using React with Next.js, see Integration with Next.js.
npm install -g flexmonster-cli
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:
# For npm 7 and later npm create vite@latest flexmonster-project -- --template react # For npm 6 npm create vite@latest flexmonster-project --template react
# 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
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., 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.
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.
Run your application from the console:
npm run dev
Open your project in the browser to see the result.
You can also watch our video tutorial that covers the integration process:
We prepared the following examples of Flexmonster usage: