Access variables defined in <head> or external script from React component

Question

I am integrating a third-party library into my React app. They provide this script I need to add to my <head>:

index.html

<head>
    <script>
      var externalVariable1 = externalVariable1 || {};
      var externalVariable2 = externalVariable2 || {};
    </script>
    // tag.min.js gives value to these variables
    <script async src="//example.com/tag.min.js"></script>
</head>

I need to use access these two variables from my component. I tried the following but I get 'externalVariable1' is not defined error. Any thoughts?

MyScreen.js

import React from 'react';

const MyScreen = () => {
    
    return (
        <React.Fragment>
            <div>
                <h2>Hello!</h2>
            </div>
    
            <div id='myId'>
                {externalVariable.push(function() { externalVariable2.display();})}
            </div>
        </React.Fragment>
    );

}

export default MyScreen;

Abir Taheer · Accepted Answer · 2021-03-08 11:37:36Z

3

If you want to access variables defined in the global scope from inside of a React component, you can typically do that by accessing the variable through the window object.

See the example below:

function App(){
  return <h1>The secret is {window.secret}</h1>
}

ReactDOM.render(<App />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<!-- Adding some global variables outside of React -->
<script>
var secret = "hello";
</script>

<div id="root"></div>

answered Mar 8, 2021 at 11:37

Abir Taheer

2,8533 gold badges16 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Access variables defined in <head> or external script from React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related