lourd / react-google-api

The Google API browser SDK turned into a declarative React component

@lourd/react-google-api

Integrate your React application with one of Google's many APIs with the GoogleApi component.

This component handles setting up Google's JavaScript API client library and making its state available to the rest of the React component tree through context and a render prop.

See @lourd/react-google-sheet for an example of using the component.

Installation

yarn add @lourd/react-google-api

Browser

Available as a simple <script> through unpkg.com. The module will be available as the global variable ReactGoogleApi.

Development

<script src="https://unpkg.com/react/umd/react.development.js" type="text/javascript></script>
<script src="https://unpkg.com/@lourd/react-google-api/dist/index.umd.js" type="text/javascript></script>

Production

<script src="https://unpkg.com/react/umd/react.production.min.js" type="text/javascript></script>
<script src="https://unpkg.com/@lourd/react-google-api/dist/index.umd.min.js" type="text/javascript></script>

Reference

import { GoogleApi, GoogleApiConsumer } from '@lourd/react-google-api'

ApiState interface

interface ApiState {
  loading: boolean;
  signedIn: boolean;
  client?: gapi.client; // https://developers.google.com/api-client-library/javascript/reference/referencedocs#client-setup,
  error?: Error;
  authorize: Function;
  signout: Function;
}

<GoogleApi/>

Property	Type	Required
clientId	string	yes
apiKey	string	yes
discoveryDocs	[string]	yes
scopes	[string]	yes
children	Function(api: ApiState): PropTypes.node or PropTypes.node	yes

Get an API key and client ID from the Google APIs console. Learn more about the discovery docs and scopes concepts from Google's reference material.

<GoogleApiConsumer/>

This component gives access to the Google API state passed down by a GoogleApi component. It uses its children prop as a function to pass the arguments along. There must be an ancestor GoogleApi rendered in the component tree for this component to work.

Property	Type	Required
children	Function<ApiState>	yes