1

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

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);
    }
})

iframe postmessage VF => Lightning

References

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.