How do I use the window object in ReactJS?

Question

I want to load the Google APIs client library inside my index.html and the onLoad='someMethod' will invoke a method in a separate javascript file. That method will then print out to the console.

The client library is loaded without any problems but the message is not getting printed out the console and I think it's because the method is not getting invoked at all.

Here is my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
    <div id="app"></div>
    <script src="lib/vendors.js"></script>
    <script src="build/bundle.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=handleGoogleClientLoad"></script>
</body>

Here is the javascript file that contains the handleGoogleClientLoad method:

import React from 'react';
import ReactDOM from 'react-dom';

import {Button} from 'react-bootstrap';

class MyApp extends React.Component {

handleGoogleClientLoad() {
    console.log('Success on load');
}

render() {
    return (
        <div>
            <Button>Click Me</Button>
        </div>
    );
  }
}


const app = document.getElementById('app');

ReactDOM.render(<MyApp />, app);

If this was plain javascript the method would look like this:

window.handleGoogleClientLoad = function() {
  // Log to the console
};

Is there anything in es6 that is similar to the window object.

Aweary · Accepted Answer · 2016-05-06 21:48:38Z

26

Component methods are not attached to the window object. MyApp.handleGoogleClientLoad is not going to be aliased to window.handleGoogleClientLoad which is what the google API script is likely trying to invoke.

If you want the Google API to call a method on your component you're going to have some trouble as there's no guarantee that your component will be mounted before or after your Google API script loads. If you want to guarantee that you'd have to inject the script after the component mounted and register the function in the componentDidMount method. You can use something like loadjs

componentDidMount() {
 window.handleGoogleClientLoad = function() {
  // log to console
 }
 loadjs('https://apis.google.com/js/client.js?onload=handleGoogleClientLoad')
}

answered May 6, 2016 at 21:48

Aweary

2,31219 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hellomoto Over a year ago

I haven't tried using loadjs yet but I have added in the componentDidMount() method and it's all working perfectly. Thanks!

Bwaxxlo Over a year ago

What about adding the google API script element to load before the react stuff is loaded?

<script src="https://apis.google.com/js/client.js?onload=handleGoogleClientLoad"></script> <script src="lib/vendors.js"></script> <script src="build/bundle.js"></script>

zero_cool Over a year ago

Without using loadjs, how does this tell you the script has loaded? I could create any function, and call it in componentDidMount using the above method, and it will run.

lewis machilika Over a year ago

I am not able to call any function that is bound with this in window.handlechange()

s27840 · Accepted Answer · 2020-09-02 17:56:41Z

An old question but I found this while solving the problem myself. I am using React Helmet to put stuff in <head>. How I have done it is below. The key here is using defer when using <script> to load gapi. This means it does not run it until the document has been parsed, meaning our onload function window.gapiInit now exists.

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer:

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

import React from "react"

import { Helmet } from "react-helmet"

const HeadHelmet: React.FC = () => {
  if (typeof window != "undefined") { // needed if SSR
    window.gapiInit = () => {
      console.log({ gapiInit: true })
      // set state, what ever you need
    }
  }

  return (
    <Helmet>
      <script
        src="https://apis.google.com/js/api.js?onload=gapiInit"
        defer={true}
      ></script>
    </Helmet>
  )
}

export default HeadHelmet

PhilVarg · Accepted Answer · 2016-05-06 21:43:16Z

0

the window object will still be available to you from your react component.. but the issue is that your defining your function just fine, but you're not calling it anywhere (is that jsonp syntax in the url of that script?). if you want that function to execute when you mount your component, you can make use of the component lifecycle hooks, specifically, componentDidMount

class MyApp extends React.Component {

handleGoogleClientLoad() {
    console.log('Success on load');
}

componentDidMount(){
  this.handleGoogleClientLoad();
}

render() {
    return (
        <div>
            <Button>Click Me</Button>
        </div>
    );
  }
}

if you want to keep the syntax you already have, then you can go ahead and access the window the way you suggest, but its thats definitely not a very react way of doing it

answered May 6, 2016 at 21:43

PhilVarg

4,8303 gold badges22 silver badges39 bronze badges

3 Comments

Aweary Over a year ago

This will call handleGoogleClientLoad when MyApp mounts, not when the Google script has loaded.

PhilVarg Over a year ago

is handleGoogleClientLoad actually dependent on your react component?

zero_cool Over a year ago

This doesn't indicate anything about scripts included in the head actually loading. It does indicate that componentDidMount is called, which is no news really.

Collectives™ on Stack Overflow

How do I use the window object in ReactJS?

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related