Skip to content

The Google API browser SDK turned into a declarative React component

License

Notifications You must be signed in to change notification settings

lourd/react-google-api

Repository files navigation

@lourd/react-google-api npm package badge Build status

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;
}
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.

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

About

The Google API browser SDK turned into a declarative React component

Resources

License

Stars

Watchers

Forks

Packages

No packages published