by Sai gowtham

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.

index.js
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.

App.js
import React from "react";

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

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

export default App;

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course