Native JS React Components

[ollwenjones]

Do you have any examples of rendering 3rd party / non GWT-React class inside a GWT-React construct?

You mention how to bundle them with webpack, so I assume you've done it? From what I can see, since your React.createElement overrides only take class extending ReactClass<P> which is a non-native @JsType - so a native @JsType can't extend it.

Am I missing something in the utils somewhere or should I contribute another overload of that method?

Anything helps. :slightly_smiling_face:

[ollwenjones]

Currently working around this using a utility in my JavaScript bundle that calls React.createElement on the JavaScript side, and just using the return of that on the GWT/Java side. Might be cleaner to handle it that way anyway.

[pstockley]

An example you could look at it is MobXDevTools. This is a React component that renders some development tools. To access this I created a JsType interface as follows

@JsType(isNative = true, namespace = JsPackage.GLOBAL)
   public class MobXDevTools {
       @JsProperty(name = "default")
       public static ReactClass<BaseProps> component;
   }

You then use it as follows:

       ReactDOM.render(
            div(null,
                //Show Dev tools toolbar
                React.createElement(MobXDevTools.component, $(new BaseProps(), "hightlightTimeout", 4000)),
                React.createElement(App.component, $(new AppStateProps(), "appState", appState))
            ),
            Document.get().getElementById("mainCont"));
    }

You can additionally create a factory method to avoid using React.createElement. The docs go into more details on this.

[pstockley]

Closing this. Let me know if you need more examples.