How do i get access to Facebooks javascript api in a Kotlin React project?

Question

I have a project using "kotlinFrontend" to create a really nice react front end written in kotlin. How do i get access to the facebook js sdk (it is usually done withing script tags)

I have this code on my HTML template that includes the generated bundle containing

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : '503127050093992',
        cookie     : true,
        xfbml      : true,
        version    : 'v3.2'
    });
    FB.AppEvents.logPageView();
};

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Inside my kotlin react code, how would i then be able to access the creatd FB obj?

Answer 1

Use external var FB

Type-safe way:

1. Get typescript definitions from facebook-js-sdk
2. Use ts2kt to convert it to Kotlin. Generated files might have some errors, but they are usually easy to fix.
3. Add these files to your project. You'll get external var FB: facebook.FacebookStatic that you can access.

Unsafe way:

1. Declare external var FB: dynamic