with-google-sheets

A higher-order component to retrieve data from Google Sheets.

Usage

withGoogleSheets()

withGoogleSheets(
  config: {
    apiKey: string,
    sheetId: string,
    clientId: ?string,
    discoveryDocs: ?Array<string>,
    scope: ?string
  },
  ranges: Array<string>,
  mapValuesToProps: ?(values: Array<Array<string>>) => Object,
): HigherOrderComponent

Given the config and ranges (and optional mapValuesToProps), the returned higher-order component will fetch the requested ranges from the configured Google Sheet.

With the exception of sheetId, all properties in the config parameter are sent to gapi.client.init(args). The default values for the config parameter are:

{
  discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
  scope: 'https://www.googleapis.com/auth/spreadsheets.readonly',
}

The resulting higher-order component will use the batchGet() method to request all the ranges at once.

Once the values in the given ranges are retrieved, they will be passed into the mapValuesToProps. By default the higher-order component will store the retrieved values under the values prop.

In addition to the props created by the mapValuesToProps parameter, the resulting higher-order component will pass along several other props:

{
  authorizing: boolean,
  initializing: boolean,
  loading: boolean,
}

The authorizing, initializing, and loading props represent the state of the underlying Google Sheets API request.

Usage example:

import React from 'react';
import { branch, compose, renderComponent } from 'recompose';
import withGoogleSheets from 'with-google-sheets';

const withAnimals = withGoogleSheets(
  {
    apiKey: 'my-api-key',
    clientId: 'my-client-id',
    sheetId: 'my-sheet-id',
  },
  ["'Animals'!A2:B"],
  ([animals]) => ({
    items: animals.map(([name, description], index) => ({
      description,
      name,
      id: index,
    })),
  }),
);

const withLoadingIndicator = branch(
  props => props.initializing | props.loading,
  renderComponent(() => <span>Loading...</span>),
);

const withSignInButton = branch(
  props => props.authorizing,
  renderComponent(({ onSignIn }) => (
    <button onClick={onSignIn}>Sign In</button>
  )),
);

const List = ({ items }) => (
  <ul>
    {items.map(({ description, id, name }) => (
      <li key={id}>
        <h3>{name}</h3>
        <p>{description}</p>
      </li>
    ))}
  </ul>
);

export default compose(
  withAnimals,
  withLoadingIndicator,
  withSignInButton,
)(List);

Installation

The with-google-sheets package is available on npm:

npm install with-google-sheets --save

Ensure that the Google API client is available in the global namespace. For example, via a script tag:

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

See Also

• Google Sheets API
• React
• recompose

License

MIT