Pulling data from Google Sheets with React components
MIT License
Easily use data from Google Sheets in your React application with the GoogleSheet
component.
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.
There are just a couple steps to using the example app. The source is in the example
directory.
Authorize
button and allow the site to have access to your Google Sheets data/d/
and /edit
, i.e. for /spreadsheets/d/foofoo/edit
it's foofoo.Tab 1!2:12
You can also use your own API key and application ID that you made on the Google APIs console.
yarn add @lourd/react-google-sheet
# or
npm install --save @lourd/react-google-sheet
Available as a simple <script>
through unpkg.com. The module will be available as the global variable ReactGoogleSheet
.
<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>
<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>
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