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?

I've included the environment variables and another method as a solution. — Brett DeWoody, Jun 21 '17 at 07:10

score 28 · Accepted Answer · edited Feb 06 '21 at 06:53

28

I see two options here.

Assign the variables to the window object
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%.

edited Feb 06 '21 at 06:53

flyingace

1,707
17
24

answered Jun 21 '17 at 07:09

Brett DeWoody

59,771
29
135
184

Thanks! I guess the `myVar = 'someString'` is akin to @Petr suggestion to use `var` in ES6? – Aaron Jun 21 '17 at 09:10
2

For me the window.myVar way doesn't work, React isn't seeing the variable – cal Dec 05 '17 at 17:03
This is really good! how about using function from another component? – suisied Oct 04 '18 at 11:42
@suisied I wrote an article on this awhile back - https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/ – Brett DeWoody Oct 04 '18 at 12:12
How can I use Environment variables from a razor generated View (Server is .net core)? – Thanasis Ioannidis Oct 17 '19 at 07:07
This work with simple values. Is there any chance to pass a json for example as a parameter to react? – nickornotto Mar 02 '20 at 22:36
@nickornotto - yes, you can assign any JS data type your `window` variables. – Brett DeWoody Mar 06 '20 at 09:40

Petr · Answer 2 · 2017-06-20T21:44:35.920

The EcmaScript 6 introduced block-scope variables and constants declared by let resp. const.

In contrast to the "old style" declaration of variable by var the visibility of such variable resp. constant is limited to actual block.

The scope of constant const1 (resp. const2) is therefore limited only to the code inside the script tag. To be able to access the const1 (resp. const2) from another script tag you would need to change its visibility. This can be achieved either by declaring it by var or by assigning its value to a variable declared by var.

E.g.:

<script type="text/javascript">
  const const1 = "1234";
  const const2 = "5678";
  var visibleConst1 = const1;
</script>

Later in your React application you can read it from window.visibleConst1.

that's pretty powerful - thanks for sharing! I guess at compile time it'll change to becoming a formal environment (so `window.visibleConst1 = const1`) variable to be backwards compatible? — Aaron, Jun 21 '17 at 09:07

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

2 Answers2

Linked

Related