Include external .js file in ReactJs web project

Question

As the external .js file url belongs to the customer, so I can't share that, I need to include the external js file, and call the function from that external js file. I have seen some solution like:

const script = document.createElement('script');
script.src = url;   //(This is external js url)
script.async = true;
document.body.appendChild(script);

But it is not working for me, or may be I don't know how it works

Assume this is the external sample code:

Sample code to call locally, if we manually download the file and import

  let conn = demo("url", false)
  conn.login("username", "myPassword")

How to do same above call after including in the reactjs

 export default function demo (end, sec) {  
    const login = (user, password) => {
            console.log(" sending login message")

    }
   
    const logout = async (user) => {
                    console.log(" sending logout message")
    }


    /*
     * Expose these methods to the client
     */
    return { login, logout }
}

betterprogramming.pub/…

Ferin Patel
– Ferin Patel

2021-05-29 16:08:23 +00:00
Commented May 29, 2021 at 16:08 — Ferin Patel
– Ferin Patel, Commented May 29, 2021 at 16:08

Tomeu Cabot · Accepted Answer · 2021-05-29 16:14:28Z

1

You will need to append your snippet in one lifecycle method like componentDidMount so React can mount it (or load) whenever you component has been mounted. Once is done, you could call the custom method.

If you use class component:

class MyComponent extends Component {

  componentDidMount() {
    const script = document.createElement('script');
    script.src = url;   //(This is external js url)
    script.async = true;
    document.body.appendChild(script);
  }

  render() { 
    return null;
  }
}

Or if you use functional component with hooks

const MyComponent = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;   //(This is external js url)
    script.async = true;
    document.body.appendChild(script);
  }, [])
}

answered May 29, 2021 at 16:14

Tomeu Cabot

4232 silver badges8 bronze badges

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

1 Comment

Tomeu Cabot Over a year ago

After loading ur external script it should run automatically. If your methods are exposed in the proper context, it should work. Unfortunately, I believe your methods are exposed on in the React context, so you will have to expose them to the window object. Before the return, you could do something like window.login = (...arg) => login(...arg);

frontendromeo · Accepted Answer · 2021-05-29 17:57:26Z

0

To add the external js, there are two option

Create an custom script and add the js file asynchronously.
Use third party node module

Below are Script-

const addExternalJs = () => {
   const script = document.createElement("script");
  script.src = "/<path1>/<path2>/yourJSFile.js";
  script.async = true;
  script.onload = () => this.scriptLoaded();

  document.body.appendChild(script);
}

Functional Based Component

useEffect(() => { addExternalJs(); }, []);
Class Based Component

componentDidMount() { addExternalJs(); }

answered May 29, 2021 at 17:57

frontendromeo

626 bronze badges

2 Comments

u_pendra Over a year ago

thanks, but I still didn't get how call the methods from that external js file

frontendromeo Over a year ago

@u_pendra when javascript files will gets loaded, you will be able to find their all function.

Collectives™ on Stack Overflow

Include external .js file in ReactJs web project

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related