How to load third party script and initialise class in React component

Question

Working Implementation:

The following implementation in HTML file works. (Instructions from third party library)

<script src="https://cdn.somethirdpartyfile.js"></script>
<script>
  const client = new myThirdParyClass({
     param1: "test",
     param2: "test"
  });
</script>

Problem: Sandbox Link

I am using the below code to add a 3rd party library to my react code base.

index.html:

<script src="https://cdn.somethirdpartyfile.js"></script>

Component Code

  useEffect(() => {
    let script = document.createElement("script");
    script.onload = function () {
      const client = new myThirdParyClass({
        param1: "test",
        param2: "test"
      });
    };

    // clean ups
    return () => {
      document.body.removeChild(script);
    };
  }, []);

But my react code throws an error saying myThirdParyClass is not defined. How can I initialize the third-party class in my React component?

Please create a reproducible example in a sandbox How to create a Minimal, Reproducible Example — Dennis Vash
– Dennis Vash, Commented Feb 22, 2021 at 10:31
You realize that React is Javascript, right? What's the need for creating a script element? — jperl
– jperl, Commented Feb 22, 2021 at 10:46

Dennis Vash · Accepted Answer · 2021-02-22 10:55:14Z

1

You don't need another script tag for it, just use the Persona object.

Of course, you will get Persona un-def because it loaded via script and not defined in the scope of the current module.

// eslint-disable-next-line
const client = new Persona.Client({
  templateId: "tmpl_FLYT5sonEPaDPmgGSSf8j1eD",
  environment: "sandbox",
  onComplete: (inquiryId) => {
    console.log(`Sending finished inquiry ${inquiryId} to backend`);
  }
});

export default function App() {
  useEffect(() => {
    client.open();
  }, []);

  return <div className="App"></div>;
}

https://codesandbox.io/s/practical-fast-ten4h-forked-ryxg0?file=/src/App.js:60-522

answered Feb 22, 2021 at 10:55

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lav Hinsu · Accepted Answer · 2021-02-22 10:37:44Z

1

What you can do here is create another component that returns the script. you want to do this dynamically because 3d party scripts change. essentially, as the article below says, load the script in the of your react page only when you need it.

Here what i found from a quick google search.

https://medium.com/better-programming/loading-third-party-scripts-dynamically-in-reactjs-458c41a7013d

answered Feb 22, 2021 at 10:37

Lav Hinsu

1041 silver badge6 bronze badges

Comments

GChevass · Accepted Answer · 2021-02-22 10:43:34Z

1

can you try to add the src and add the script tag to the body in your component like this ?

const script = document.createElement("script");
script.src = 'https://cdn.somethirdpartyfile.js'; // new line
script.onload = function () {
   const client = new myThirdParyClass({
    param1: "test",
    param2: "test"
    });
  };
document.body.appendChild(script); // new line

answered Feb 22, 2021 at 10:43

GChevass

2453 silver badges13 bronze badges

3 Comments

Kiran Dash Over a year ago

Thanks for the answer. I have tried this too. But it still throws error: myThirdParyClass is not defined

GChevass Over a year ago

isn't it that you want ? codesandbox.io/s/…

Kiran Dash Over a year ago

Turns out. It's the ESLint that wasn't allowing me to compile.

Collectives™ on Stack Overflow

How to load third party script and initialise class in React component

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related