Skip to content

Instantly share code, notes, and snippets.

@crittermike
Last active May 9, 2022 08:18
Show Gist options
  • Save crittermike/28fe4877ddabff65f589311fd5f8655c to your computer and use it in GitHub Desktop.
Save crittermike/28fe4877ddabff65f589311fd5f8655c to your computer and use it in GitHub Desktop.
Using Google API (gapi) with React
/* global gapi */
const API_KEY = 'YOURAPIKEYHERE';
import React, { Component } from 'react';
class App extends Component {
loadYoutubeApi() {
const script = document.createElement("script");
script.src = "https://apis.google.com/js/client.js";
script.onload = () => {
gapi.load('client', () => {
gapi.client.setApiKey(API_KEY);
gapi.client.load('youtube', 'v3', () => {
this.setState({ gapiReady: true });
});
});
};
document.body.appendChild(script);
}
componentDidMount() {
this.loadYoutubeApi();
}
render() {
if (this.state.gapiReady) {
return (
<h1>GAPI is loaded and ready to use.</h1>
);
};
}
export default App;
@Alamut98
Copy link

@mharrisweb

Does anyone know how I can get the gapi to work with react-native?

@ahmed-raza12

did you find a way to do with react-native if yes plz let me know

Did either of you figure it out?

Are there any specific problems or incompatibilities between gapi and React Native or you're just looking for an example of how to use gapi ?
i want send email through gmail api in react native. In that i got same error cant fid variable 'gapi'.Give me suggestion .

@mharrisweb
Copy link

@Alamut98 no I am still looking for an example using RN. The docs are very terse.

@dsyorkd
Copy link

dsyorkd commented May 6, 2020

Would help if there was a closure at the bottom closing the class.

@simranbirla
Copy link

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

add this script tag in index.html
then type "gapi" in console of your tab in which your project is running to check if gapi is defined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment