0

I want to include external JavaScript library in my ReactJS app. I am using Topol.io plugin that loads email template inside ReactJS. however, i am not i am finding difficulties in Setting state in innerHtml script. i am using:

`componentWillMount() {
    const loadScript = callback => {
      const existingScript = document.getElementById("scriptPlugin");
      if (!existingScript) {
        const scriptPlugin = document.createElement("script");
        scriptPlugin.id = "scriptPlugin";
        scriptPlugin.innerHTML = `var TOPOL_OPTIONS = {
              id: "#app",
              authorize: {
                apiKey: "xyz",
                userId: "xyz"
              },
              templateId: "${this.state.TemplateId}",
              removeTopBar: false, 
              callbacks: {
                onSaveAndClose: function(json, html) {
                  // HTML of the email
                  console.log(html);
                  // JSON object of the email
                  console.log(json);
                },
                onSave: function(json, html) {
                  console.log(json);
                  console.log(html);
                  var encodedeString = window.btoa(JSON.stringify(json));
                  // HTML of the email
                  console.log(encodedeString);
                  // JSON object of the email
                  console.log(window.atob(encodedeString));
                },
                onAutoSave($json) {
                  console.log("Auto Save");
                  "${this.setState({ demo: `{json}` })}"
                  console.log(json);
              }
              }
            };`;
        document.body.appendChild(scriptPlugin);
        const scriptLoader = document.createElement("script");
        scriptLoader.type = "text/javascript";
        scriptLoader.id = "scriptLoader";
        scriptLoader.src =
          "https://d5aoblv5p04cg.cloudfront.net/editor/loader/build.js";
        document.head.appendChild(scriptLoader);

        scriptLoader.onload = function() {
          const scriptInit = document.createElement("script");
          scriptInit.id = "scriptInit";
          scriptInit.innerHTML = `TopolPlugin.init(window.TOPOL_OPTIONS);`;
          document.body.appendChild(scriptInit);
        };
        this.setState({ loaded: true });
        scriptPlugin.onload = () => {
          // if (callback) callback();
        };
      }
    };
    loadScript(() => {});
  }
 `

So, i want to set the state using the variable inside or the value return by OnSave or AutoSave method.

3
  • 1
    There are a number of questions with similar titles. Have you seen them? For instance, How to include external javascript library in reactjs... Commented Sep 12, 2019 at 18:09
  • yes. I tried to load screen using innerhtml. However, i am not able to access variable of Callback of javascript function to set state in reactjs. Commented Sep 12, 2019 at 18:12
  • 1
    Perhaps you could share your code for that process in an minimal reproducible example. Right now, this question lacks any detail and is impossible to answer. Please see How to Ask for tips on how to edit your question to a state where it's answerable. Commented Sep 12, 2019 at 18:14

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.