CODEWITHSUNDEEP
reactjs
veena panakanapalli
veena panakanapalli

Reputation: 461

How to add external JavaScript files in ReactJS

I would like to include jquery.min.js and add a external JavaScript file and call a JavaScript function inside an existing react JS file.

I did below but it is not working

const VoCaaSComponentbtn = (
        <React.Fragment>
             <div>
            <script type="text/javascript"src="https:xxxx/jquery-3.3.1.min.js"></script> 
            <script type="text/javascript"src="https:xxx/microsurvey" defer="defer"></script>
            <div id="microsurvey" module="true" tab-info="tabname"></div>
            <script type="text/javascript"> voc_getsurvey(); </script>                  
            </div>
        </React.Fragment>
    );

Upvotes: 8

Views: 30229

Answers (3)

Qubaish Bhatti
Qubaish Bhatti

Reputation: 728

One another way to add external JavaScript file. If you only want to add for specific page or component.

componentDidMount() {
   var script = document.createElement('script')
   script.src = // path of external javascript file.
   script.class = "external-script"
   document.body.appendChild(script);
}

Upvotes: 4

Herat Patel
Herat Patel

Reputation: 798

You can import all the scripts in the main HTML file.

If you want to import the script inside the react component, you can use the following options.

Option 1: Use plain Javascript and React custom hook

Create custom hook [useScript.js]

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
};

export default useScript;

Use

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');
  // rest of your component
}

Option 2: Use plain Javascript in ComponentDidMount

componentDidMount () {
  const script = document.createElement("script");
  script.src = url;
  script.async = true;
  document.body.appendChild(script);
}

Option 3: Use dangerouslySetInnerHTML

const codeStr = `
  <div>
     <script type="text/javascript"src="https:xxxx/jquery-3.3.1.min.js"></script> 
     <script type="text/javascript"src="https:xxx/microsurvey" defer="defer"></script>
     <div id="microsurvey" module="true" tab-info="tabname"></div>
     <script type="text/javascript"> voc_getsurvey(); </script>                  
  </div>
`

<div dangerouslySetInnerHTML={{ __html: codeStr }} />

Upvotes: 23

Ferin Patel
Ferin Patel

Reputation: 3968

You can add External JS library in indeex.html page inside public directory.

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  
  <script type="text/javascript"src="https:xxxx/jquery-3.3.1.min.js"></script> 
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  
</body>

</html>

Upvotes: 7

Related Questions