Embed the Flexmonster UI
This tutorial describes how to start using the Flexmonster UI in your React project.
You can also try out the component using our sample React project.
Prerequisites
Step 1. (optional) Create a React application
If you already have a React app, skip this step.
Step 2. Get Flexmonster
To add Flexmonster for React, run the following command inside your project:
npm install @flexmonster/react
This command downloads the @flexmonster/react wrapper to node_modules/ and adds it as a dependency to package.json.
Step 3. Embed the Flexmonster UI
Step 3.1. Import Flexmonster styles:
Step 3.2. Import the FMFlexmonster component:
Step 3.3. Insert the FMFlexmonster component:
Step 4. Connect the Flexmonster UI to the sample data source
In this step, we will connect Flexmonster UI to the sample data hosted on the Flexmonster server. If you do not have the server yet, install the Flexmonster server.
Step 4.1. Create a state object with connection parameters for the sample data source:
const state = {
id: "fm-state",
dataset: {
dataSource: {
url: "ws://localhost:9501/",
name: "SampleData"
}
}
};
The url contains the server’s URL, and the name is the data source’s name. You can check out the data source name in the Admin Panel’s Data sources tab.
Step 4.2. Pass the state object to the Flexmonster instance:
<FMFlexmonster
state={state}
/>
Step 5. Run the application
Run your application from the console:
npm run dev
Open your project in the browser to see the result.