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
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?
Try the unoffical snapchat npm package . (no idea if the package does what you need, buy maybe you haven't seen it yet?)
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
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
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
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)
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.