CODEWITHSUNDEEP
javascriptreactjs
metalice
metalice

Reputation: 1031

How do I use external script that I add to react JS?

I would like to add to my react component a

<script>http://xxx.xxx/XX.js</script>

I know I can simply add it using JSX , what I don't know is how to use it,

for instance this script has a function called A.Sort() , how can I call it and use it from a component?

Upvotes: 90

Views: 189458

Answers (10)

kta
kta

Reputation: 20110

t.js

var a = 'Hello'

and inside your react component's useEffect:

useEffect(() => {
    let _script = document.createElement('script');
    _script.type = 'text/javascript';
    _script.src = "http://{ip_addr}/js/t.js";
    document.head.appendChild(aScript);
    _script.onload = function() {
    console.log(window.a)
    }
},[]);

It should print 'Hello'. This is a hack solution.Please note that variable a is declared as var.

Upvotes: 1

Nikhil Sinha
Nikhil Sinha

Reputation: 951

If the script you're importing is a JS module, i.e., it has variables and/or functions exported using the export declaration, then, in your component, you can use the await operator along with the import declaration (MDN) like so:

const importedModule = await import("http://xxx.xxx/XX.js")

(Remember to call the above declaration inside an async function)

And then you can use it like so:

importedModule.sort()

If you see an error that says something like Error: Cannot find module in the console, change your declaration to be like so:

const importedModule = await import(/* webpackIgnore: true */ "http://xxx.xxx/XX.js")

(On why the /* webpackIgnore: true */ comment is required, read this very-well-written answer)

If you import the external module like this, you won't need to add the <script> tag in your html.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

If you want to import script in multiple components, then you can create your own custom hook that allows you to insert script in desired component:

import { useEffect } from 'react'
const importScript = src => {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = src
    script.async = true
    document.body.appendChild(script)
    return () => {
      document.body.removeChild(script)
    }
  }, [src])
}
export default importScript

Using it on your desired component:

import importScript from 'import-path'
const DesiredComponent = props => {
  importScript("/path/to/resource")
  // ... rest of the code
}

Upvotes: 1

Hillsie
Hillsie

Reputation: 715

A hooks version.

import * as React from "react";

function loadError(onError) {
  console.error(`Failed ${onError.target.src} didn't load correctly`);
}

function External() {
  React.useEffect(() => {
    const LoadExternalScript = () => {
      const externalScript = document.createElement("script");
      externalScript.onerror = loadError;
      externalScript.id = "external";
      externalScript.async = true;
      externalScript.type = "text/javascript";
      externalScript.setAttribute("crossorigin", "anonymous");
      document.body.appendChild(externalScript);
      externalScript.src = `https://externalurl.example.com/external.js?key=9393ABCDEFGH`;
    };
    LoadExternalScript();
  }, []);

  return <></>;
}

export default External;

Upvotes: -1

Rahul Sarma
Rahul Sarma

Reputation: 894

You can use React Helmet npm

step 1 : npm i react-helmet

step 2 :

<Helmet>
    <script src="/path/to/resource.js" type="text/javascript" />
</Helmet>

Upvotes: 13

Jason KIM
Jason KIM

Reputation: 147

After adding this script into your index.html

<script>http://xxx.xxx/XX.js</script>

you might check the available functions if you console.log(window) in App.js (or, wherever you want). Once you check the exact function, then you can use it like

window.A.sort();

I think this could be the simplest way. Just remember that you have to write 'window.' on the left side of your function.

Upvotes: 4

Hany Moh.
Hany Moh.

Reputation: 989

Sometimes we need to work with external js libraries in such cases we need to insert script tags into components, but in react we use jsx, so we can’t add script tags directly just like how we add in HTML.

In this example, we will see how to load an external script file into a head, body elements, or component.

componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://some-scripturl.js";
    script.onload = () => this.scriptLoaded();



    //For head
    document.head.appendChild(script);

    // For body
    document.body.appendChild(script);

    // For component
    this.div.appendChild(script);

  }

Upvotes: 9

Florian
Florian

Reputation: 1242

You can load the script asynchronously and access it on load. 

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

  document.body.appendChild(script);
}

It should get attached to the window. 

 scriptLoaded() {
   window.A.sort();
 }

or

scriptLoaded() {
  A.sort();
}

Upvotes: 103

keul
keul

Reputation: 7819

You can either modify your index.html file (if you are using one) by adding the required script.

Alternatively, if you can't edit it or you are not using it, there's a bunch of add-ons that solve this, for example react-load-script

Upvotes: 5

Bilal
Bilal

Reputation: 612

You can include the tag in the /public/index.html, and then use the script as you use it in normal JS code, following example for if you want to use jQuery:

in your public/index.html include the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

And then anywhere you can use the jQuery functionality as usual:

window.$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

Upvotes: 29

Related Questions