How can I pass a variable from 'outside' to a react app?

Question

I have created a react app using create-react-app my-app. I have an existing web page, and the react app attaches to a div within the html page - as per normal.

The web page has some global javascript constants const1 and const2 that are needed for the react app to function. Is there a way I can pass these variables to the react app? The structure is as follows

<script type="text/javascript">   const const1 = "1234";   const const2 = "5678"; </script>  <script type="text/javascript" src = "/static/react-app.js" ></script> 

I'm struggling because the javascript is of course minified during the build phase, so any declarations as follows:

class App extends React.Component{   constructor(props) {     super(props);     this.state = {       stat1: const1,       stat2: const2, 

don't work as the variables are re-written. I have tried to be sneaky and use eval as follows

const const1 = eval("function c1(){console.log(const1);return const1;};c1();"); 

but the eval (and the console.log) return undefined. Is there a way I can invoke a react component, and pass it variables from the outside?

Answer 1

I see two options here.

1. Assign the variables to the window object
2. Use environment variables

Using the window object

To use the window object, declare the variable as

myVar = 'someString' 

or

window.myVar = 'someString' 

In both cases you'll access the variable within React with window.myVar. Here's a quick example:

class App extends React.Component {   render() {     return (       <div>         <h1>Hello, React and ES6!</h1>         <p>Let's play. :)</p>         <p>{window.myVar}</p>       </div>     );   } }  ReactDOM.render(<App />, document.getElementById("app"));

html, body {   height: 100%; }  body {   display: flex;   justify-content: center;   align-items: center;   font-family: Helvetica Neue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="app"></div> <script>   window.myVar = 'someString2' </script>

Using environment variables

The Create React App build allows for environment variables to be used within the app. To add an environment variable create a .env file in the root of your project, then add the appropriate variables and prefix the variable name with REACT_APP_. For example:

REACT_APP_MYVAR = "someString" 

In the app these variables can be accessed within your components with {process.env.REACT_APP_MYVAR}, or within the HTML with %REACT_APP_MYVAR%.