Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
<script language="javascript">
document.write('<script language="javascript" src="http://tickettransaction.com/?bid='+bid+'&sitenumber='+site+'&tid=event_dropdown" ></' + 'script>');
</script>
I follow this Adding script tag to React/JSX but it does not work for me...
How do I load the script in my react component?
–
–
–
–
After a lots of R&D finally I found my solution.
I have used npm postscribe to load script in react component
postscribe('#mydiv', '<script language="javascript" src="http://tickettransaction.com/?bid='+bid+'&sitenumber='+site+'&tid=event_dropdown"></script>')
–
A 2021 TypeScript example using functional components that works with NextJS
(ensures code only runs client-side)
declare global {
interface Window {
hbspt: any
export default function Contact() {
useEffect(() => {
if (window && document) {
const script = document.createElement('script')
const body = document.getElementsByTagName('body')[0]
script.src = '//js.hsforms.net/forms/v2.js'
body.appendChild(script)
script.addEventListener('load', () => {
window.hbspt.forms.create({
// this example embeds a Hubspot form into a React app but you can tweak it for your use case
// any code inside this 'load' listener will run after the script is appended to the page and loaded in the client
}, [])
return <div id="hbspt-form" className="p-5"></div>
–
–
the following method is worked for me. try, hope it will work for you.
basically, you can create a script tag and append it to the body tag. like this--
var tag = document.createElement('script');
tag.async = true;
tag.src = 'THE PATH TO THE JS FILE OR A CDN LINK';
var body = document.getElementsByTagName('body')[0];
body.appendChild(tag);
you can use this on a life cycle hook of react like this.
componentDidMount() {
var loadScript = function (src) {
var tag = document.createElement('script');
tag.async = false;
tag.src = src;
var body = document.getElementsByTagName('body')[0];
body.appendChild(tag);
loadScript('PATH TO THE JS FILE OR CDN URL');
I recommend using React Helmet. I've used it on a couple of Create-React-Apps, and it allows you to write actual script tags combined with vanilla JS.
It makes the process a lot smoother. So for you it'd be something like this once you've imported React Helmet.
<script language="javascript" src='http://tickettransaction.com/?bid='+ bid + '&sitenumber='+ site +'&tid=event_dropdown' ></ script>
This came to my rescue. This is the easiest way to load Script Tags
https://www.npmjs.com/package/react-script-tag
import ScriptTag from 'react-script-tag';
const Demo = props => (
<ScriptTag src="/path/to/resource.js" />
There are other ways to do this too :
https://medium.com/better-programming/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668
–
Most of packages to do the job are outdated at the date. I found a solution that maybe can be useful for someone and it´s using a hook with the advantage you can control the state and take action based on it.
import { useEffect, useState } from 'react';
export const useExternalScript = (url) => {
let [state, setState] = useState(url ? "loading" : "idle");
useEffect(() => {
if (!url) {
setState("idle");
return;
let script = document.querySelector(`script[src="${url}"]`);
const handleScript = (e) => {
setState(e.type === "load" ? "ready" : "error");
if (!script) {
script = document.createElement("script");
script.type = "application/javascript";
script.src = url;
script.async = true;
document.body.appendChild(script);
script.addEventListener("load", handleScript);
script.addEventListener("error", handleScript);
script.addEventListener("load", handleScript);
script.addEventListener("error", handleScript);
return () => {
script.removeEventListener("load", handleScript);
script.removeEventListener("error", handleScript);
}, [url]);
return state;
Use it is simple as do:
const externalScript = 'https://player.live-video.net/1.6.1/amazon-ivs-player.min.js';
const scriptStatus = useExternalScript(externalScript);
useEffect(() => {
if (scriptStatus === 'ready') {
// Do something with it
}, [scriptStatus]);
Update 2022 for Class based as well as Functional components.
You can create a function as below and then use it inside componentDidMount:
function loadScript(url, callback){
let script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
} else { //Others
script.onload = function(){
callback();
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
// For class based components
componentDidMount() {
loadScript("scriptUrl", callback());
// For functional components
useEffect(() => {
loadScript("scriptUrl", callback());
}, [])
Source: add third-party js library to Create React App
–
–
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
