@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.
- Click the
Authorizebutton and allow the site to have access to your Google Sheets data - 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/editit's foofoo. - 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-sheetBrowser
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