How to include <script> with a "new Class({})" init in react.js?

Question

I have a script like:

 <div id="widget"></div>
          <script
            type="text/javascript"
            src="https://widget.io/w.js"
          ></script>
          <script type="text/javascript">
              new Widget({
                width: 768,
                height: 525,
                containerId: "widget",
                partner_id: "default",
           
              })
          </script>

That I need to trigger within a react component.

I've seen the other questions related to this and its working using their examples - except for the new Widget({}) params.

React is saying Widget is not defined, as its not imported from anywhere.

I'm using react helmet for adding the script tag, so my render() function looks like this:


  render() {
    return (
      <div id="wert-widget">
        <Helmet>
 <div id="widget"></div>
          <script
            type="text/javascript"
            src="https://widget.io/w.js"
          ></script>
          <script type="text/javascript">
             {
                new Widget({
                width: 768,
                height: 525,
                containerId: "widget",
                partner_id: "default",
           
              })
              }
          </script>
        </Helmet>
      </div>
    );
  }

But react throws an error saying Widget is not defined.

Using the setInnerHTML in a componentDidMount function, also does not work, as it just sets the new Widget object as a string and doesn't initialize the widget.

How would you do this in react?

Adding it into the HTML index.html directly isn't helpful as we only need this widget on one component when a user clicks a button.

Akif Hadziabdic · Accepted Answer · 2021-03-30 06:39:59Z

2

componentDidMount() {
  const script = document.createElement("script");
  script.src = "/static/libs/your_script.js";
  script.async = true;
  script.onload = () => this.scriptLoaded();

  element.appendChild(script);
}

answered Mar 30, 2021 at 6:39

Akif Hadziabdic

2,9181 gold badge17 silver badges27 bronze badges

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

1 Comment

Zach Over a year ago

How do you add the class info to the script - ` new Widget({})`?

Collectives™ on Stack Overflow

How to include <script> with a "new Class({})" init in react.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related