React - Converting HTML script tag to load an SDK asynchronously

Question

Currently I'm trying to add snapchat to a site through their SDK

my current attempt, can't figure out how to convert their Dom script into a function to be called when my component is loaded:

export function snapchatSDK() {
  return new Promise(resolve => {
    const script = document.createElement('script');
    script.src = 'https://sdk.snapkit.com/js/v1/create.js';
    document.head.append(script);
  });

}

class Platforms extends React.Component {

  componentDidMount() {
    snapchatSDK();
  }

render() {
    return (
      <div>
      <p> Share on Social Media Platforms</p>
      <h4>Snapchat<h4>
       <button 
         className="snapchat-creative-kit-share"
         data-share-url= urlTobeShared()
          >
         Share me 
       </button>

       <h4>Twitter<h4>
       <button>
         Share me 
       </button>

      <h4>Reddit<h4>
       <button>
         Share me 
       </button>
      </div>
    );
  }
}

Here is a link to the doc's as well: snap doc

Are you facing any issue? What is the exact problem

Shubham Khatri
– Shubham Khatri

2020-04-20 12:39:26 +00:00
Commented Apr 20, 2020 at 12:39 — Shubham Khatri
– Shubham Khatri, Commented Apr 20, 2020 at 12:39

Dana Woodman · Accepted Answer · 2020-04-20 22:39:54Z

3

+25

Your example doesn't make it very clear what you're trying to accomplish, but maybe one of these will help you figure it out?

Option 1

Try the unoffical snapchat npm package. (no idea if the package does what you need, buy maybe you haven't seen it yet?)

Option 2

Load the script in your HTML

<script src="https://sdk.snapkit.com/js/v1/create.js" />
<script src="/path/to/your/bundle.js" />

If loaded before your components mount, it should pick up your HTML and do whatever it does

Option 3

Maybe try setting async = false on the script:

const script = document.createElement('script');
script.src = 'https://sdk.snapkit.com/js/v1/create.js';
script.async = false
document.head.append(script);

Please see this article and this SO post. Key takeaway is:

Scripts that are dynamically created and added to the document are async by default

answered Apr 20, 2020 at 22:39

Dana Woodman

4,6322 gold badges43 silver badges39 bronze badges

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

Comments

AdMac · Accepted Answer · 2020-05-01 00:11:37Z

2

I think that the main issue is how you are trying to load the script dynamically. I am guessing that is what you want to do. If so, there are several more steps. Here is a link to a comparative example that goes through some of them: https://www.newline.co/fullstack-react/articles/Declaratively_loading_JS_libraries

edited May 1, 2020 at 0:11

answered Apr 26, 2020 at 23:40

AdMac

314 bronze badges

Comments

ChandraKumar · Accepted Answer · 2020-04-27 13:17:02Z

0

If you are using parcel2 or webpack4 (or create-react-app) then you could use dynamic import and most importantly without this issue

However, the code is simple

    import("https://sdk.snapkit.com/js/v1/create.js").then(_snap =>
      setSnap(_snap)
    );

if you are facing that issue you could use

    import(/* webpackIgnore: true */ "https://sdk.snapkit.com/js/v1/create.js").then(
      _snap => setSnap(_snap)
    );

answered Apr 27, 2020 at 13:17

ChandraKumar

5574 silver badges17 bronze badges

Collectives™ on Stack Overflow

React - Converting HTML script tag to load an SDK asynchronously

3 Answers 3

Option 1

Option 2

Option 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Option 1

Option 2

Option 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related