How to declare a Global variable in React

In this tutorial, we are going to learn about how to declare a global variable in the react app.

Sometimes we need to access a particular data throughout our app in such cases we can create a global variables in react.

Declaring a global variable

In this example, we are declaring a global variable called window.$name inside index.js file.

Open your index.js file and add the below code.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

window.$name = 'king' //global variable

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

Accessing global variable

Now, we can access the global variable window.$name from our components like this.

import React from "react";

function App() {
  const name = window.$name;  console.log(name); // 'king'

  return (
    <div>
      <h1>{name}</h1>    </div>
  );
}

export default App;