Call external Javascript function from react components

Question

Im not sure if this has been asked before or anybody has encountered the same issue on reactjs. So the scenario is like this, I have an index.html file that include

Answer 1

Try this solution to call global functions from React with TypeScript enabled:

Either in index.html or some_site.js

function pass_function(){
  alert('42');
}

Then, from your react component:

window["pass_function"]();

And, of course, you can pass a parameter:

//react
window["passp"]("react ts");

//js
function passp(someval) {
  alert(`passes parameter: ${someval}`);
}

Answer 2

In index.html

<script type="text/javascript">
  function test(){
    alert('Function from index.html');
  }
</script>

In your component

componentWillMount() {
  window.test();
}

Answer 3

So either you define the method on global scope (aka window). And then you can use it from any methods, being React or not.

Or you can switch to module based paradigm and use require/import to get the module and use the function.

For bigger projects the latter is better as it's scales, while if you need a demo or POC you can certainly hook all to global scope and it will work.

More information about modules is at: http://exploringjs.com/es6/ch_modules.html

Answer 4

You can attached your method to the global window object and than use it like that in your component:

<button onClick={this.howItWorks} type="button" className='btn'>How it Works</button>

howItWorks = () => {
  window.HowItWorksVideo();
}