How to use a globally defined script inside a React component

In React and web development, a globally defined script is a JavaScript code designed to be accessible across an entire web page or application. This allows functions, variables, or objects defined in the script to be used from various parts of the page or app, including other scripts, functions, or components.

We can use a globally defined script inside a React component in the following ways:

  • Using window object

  • Using import/export

Using window object

We can use the window object to use a variable/function defined in the global script. The window object is the global object within the browser environment, making it accessible from any script running on a web page, including scripts used in a React application.

  • For instance, a globally defined script creates a user variable.

window.user = {
  name: "Ali",
  age: 10,
};

  • Now, we can access the user variable in the following manner:

  • In the App.js file, we import the user variable from the ./public/new.js file to use it in the App component.

  • We can now access the user variable in the App component by using window.user.

Using import/export

To use a variable/function that is defined in the global script, we can also use import/export.

  • We can export the variable/function from globally defined script in the following manner:

export const changeBackgroundColor = (color) => {
  const element = document.getElementById('root');
  if (element) {
    element.style.backgroundColor = color;
  } else {
    console.error('Element with id "change-color-element" not found.');
  }
}
export const user = {
  name: "Ali",
  age: 10,
};

  • We can then import those variables/functions in the following manner:

  • In the App.js file, we import the user variable and the changeBackgroundColor function from the ./public/new.js file to use it in the App component.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved