I have created a react.js application where I have used SLDS for my styling and I have also installed Lightning container module to make direct API calls to APEX code in my org. I want to plug the component into my lightning component and then pull it to lightning community. I understand that, to embed react.js app into lightning component, i need to use lightning:container which is not supported in Lightning Communities. IS there any other way I can plug my react into communties. or embedding my react to VF and then to communties is the only way out now ?
1 Answer
Prior to the introduction of lightning:container, this could be done using VisualForce in Lightning Communities to host an iframe:
In order to use another framework as part of a package that uses Lightning, please use an iframe or Visualforce container until approved Lightning containers are published.
<div>
<iframe aura:id="vfFrame" src="{!'https://' + v.vfHost + '/apex/GoogleMap'}" frameborder="0" width="100%" height="376"/>
</div>
which communicates with your external component via HTML5 postMessage:
({
recordChangeHandler : function(component, event) {
var id = event.getParam("recordId");
component.set("v.recordId", id);
var service = component.find("service");
service.reloadRecord();
},
propertyChangeHandler : function(component, event) {
var property = component.get("v.property");
var vfOrigin = "https://" + component.get("v.vfHost");
var vfWindow = component.find("vfFrame").getElement().contentWindow;
vfWindow.postMessage(property, vfOrigin);
}
})
References
