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.
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.
We prepared the following examples of Flexmonster usage: