@lourd/react-google-sheet

Easily use data from Google Sheets in your React application with the GoogleSheet component.

Background

The motivation for making this module was researching ways to easily use data from Google Sheets. This module is a client-centric approach, using React to make a declarative component API for the Google Sheets browser API.

Under the hood this is using the generic @lourd/react-google-api module for handling loading and initializing the Google API JavaScript client library.

Example

There are just a couple steps to using the example app. The source is in the example directory.

1. Click the Authorize button and allow the site to have access to your Google Sheets data
2. Get the ID of a spreadsheet that you have permission to view. In the URL of a sheet it's in between /d/ and /edit, i.e. for /spreadsheets/d/foofoo/edit it's foofoo.
3. Choose a range of the spreadsheet, e.g. Tab 1!2:12

You can also use your own API key and application ID that you made on the Google APIs console.

Installation

yarn add @lourd/react-google-sheet
# or
npm install --save @lourd/react-google-sheet

Browser

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

Development

<script src="https://unpkg.com/react/umd/react.development.js" type="text/javascript"></script>
<script src="https://unpkg.com/@lourd/react-google-sheet/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-sheet/dist/index.umd.min.js" type="text/javascript"></script>

Reference

import { GoogleSheet, GoogleSheetsApi } from '@lourd/react-google-sheet'

<GoogleSheetsApi/>

This component handles downloading and instantiating the Google sheets browser API, and passing it into context for other components to use. See an example of this component used in App.js

Property	Type	Required	Default	Description
scopes	[string]	no	['https://www.googleapis.com/auth/spreadsheets.readonly']	The authorization scopes being requested for the API client.

<GoogleSheet/>

Property	Type	Required	Description
id	string	yes	The id of the spreadsheet
range	string	yes	The range of cells in the spreadsheet

Ths component handles getting the Google client from context and using it to request the data from the Sheets API. See an example of this component used in DynamicSpreadsheet.js