Access callback in React

Question

Google API JS library returns a callback on successful load.

<script src="https://apis.google.com/js/client.js?onload=callback"></script>

Can someone explain how to integrate this callback into React application with server-side rendering? In vanilla js it will something like this:

function callback() {
  gapi.auth.authorize({...});
}

David L. Walsh · Accepted Answer · 2016-01-18 00:25:47Z

3

It depends on exactly what you're doing. Let's assume you want to enact a state change on that callback. You could put the following in your React component:

componentWillMount() {
    if (typeof window === 'undefined') {
        return; // client side only
    }
    window.callback = () => {
        this.setState({
            isAuthorized: true
        });
    };
}

Just make sure this callback is defined before you call the remote resource. i.e. Put your React scripts before the Google script.

answered Jan 18, 2016 at 0:25

David L. Walsh

24.9k10 gold badges63 silver badges50 bronze badges

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

6 Comments

Kertis van Kertis Over a year ago

Hmm... even if render function returns false I should include component declaration into the html code, correct? Is it possible to achieve the same thing without doing this?

David L. Walsh Over a year ago

I'm afraid I don't understand what you're asking here. Perhaps you might like to provide some detail on what you're trying to achieve.

Kertis van Kertis Over a year ago

I wrote a component, here is my code: jsfiddle.net/t9d2d2gp Now I can use it like this: import api from 'comp'. Question is, how to use it without adding html tags <api></api>

David L. Walsh Over a year ago

You don't need to create a brand new React component. Simply define the above componentWillMount within one of your existing React components.

Kertis van Kertis Over a year ago

Well it is an API, so I thought about defining API service, so I can call it from different parts of my code.

|

Collectives™ on Stack Overflow

Access callback in React

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related