Download Free Trial

Make React integration with imports?


We’re trying to integrate the Flexmonster React component in our app. There are no examples online that use webpack or that don’t set flexmonster as a global var for React.
We’d like to add the pivot by using a simple import { FlexmonsterPivot } from “flexmonster” statement. Something similar to this:
I’m under the impression that window.FlexmonsterPivot only gets set if window.React is set – but we don’t have React set on window, we import it in the files that we need.
I was wondering if this is possible?

6 answers

Tanya Gryshko Flexmonster February 15, 2017

Hello Tijs,
Please provide us with technology stack in your project. Is it React + ES6 or React + TypeScript? We will investigate your question further and prepare the example if possible.

Tijs Planckaert February 15, 2017

Hi Tanya, we use typescript

Ian Sadovy Flexmonster February 16, 2017

Hi Tijs,
Thank you for the details.
We have prepared a sample for React+TypeScript.
It uses webpack to build the project.
Also, Flexmonster is imported as following:

import { FlexmonsterReact } from "./components/FlexmonsterReact";

Please let us know if it works for you.

Tijs Planckaert February 16, 2017

Thanks, that’s a lot more useable!
We might update the component and tweak it a little, I’ll share with you guys the result if you want.

Toni Laukka June 13, 2017

Do you have similar sample without TypeScript? So just with React + ES6 or with React + ES6 + Flow? Our project is based on React Boilerplate:

Dmytro Zvazhii Flexmonster June 16, 2017

Hello Toni,
Thank you for your question. We took some time on our investigation and prepared an integration example based on reactboilerplate project. It is located in the same pivot-react repository in ES6 folder. You are welcome to try it.
Please let us know if everything works fine for you.
Best regards,

Please login or Register to Submit Answer