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: