Skip to content
react hook for using google spreadsheet as a data table (API endpoint)
JavaScript HTML
Branch: master
Clone or download
idw111 Merge pull request #5 from idw111/develop
fallback to v3 api when API KEY is not given or v4 api fails
Latest commit 70eb29f Feb 6, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode first commit Jan 20, 2020
example updated to support both Google Sheetes API v3 and v4 Jan 21, 2020
src fallback to v3 api when API KEY is not given or v4 api fails Jan 27, 2020
.gitignore update .gitignore Jan 21, 2020
.prettierrc first commit Jan 20, 2020
README.md update README Jan 21, 2020
babel.config.js first commit Jan 20, 2020
package-lock.json first commit Jan 20, 2020
package.json update README Jan 21, 2020

README.md

use-google-spreadsheet

helps developers use google spreadsheet as their data table (backend endpoint)

Live Demo

install

npm install use-google-spreadsheet

usage

  1. Configure Google Cloud Console to get API key for Google Sheets API (API_KEY)

    • It uses Google Sheets API v4, when API_KEY is given
    • If API_KEY is not given, it falls back to Google Sheets API v3 which would be deprecated soon
  2. Create a google spreadsheet

    • Insert keys in the first row
    • Insert values after first row
  3. Publish the spreadsheet to web (File > Publish to Web)

  4. Use the share url to fetch the data (File > Share)

  5. You'll fetch the spreadsheet as the following

spreadsheet

// fetched data (rows)
[
	{ "key1": "row1:value1", "key2": "row1:value2", "key3": "row1:value3" },
	{ "key2": "row2:value1", "key2": "row2:value2", "key3": "row2:value3" },
	{ "key3": "row3:value1", "key2": "row3:value2", "key3": "row3:value3" }
]

example

import useGoogleSpreadsheet from 'use-google-spreadsheet';

const SomeComponent = ({}) => {
	const API_KEY = 'XXXXXXXXXXXX';
	const shareUrl = 'https://docs.google.com/spreadsheets/d/1W5D9WvlrXvndEc0b42OsdzJTT1M-MxKVYdPEtleqRQY/edit?usp=sharing';
	const { rows, isFetching } = useGoogleSpreadsheet(shareUrl, API_KEY);
	return isFetching ? (
		<Spinner />
	) : rows ? (
		<ul>
			{rows.map((row, i) => {
				return (
					<li key={i}>
						{Object.keys(row).map((key, i) => (
							<span key={i}>
								{key}: {row[key]}
								<br />
							</span>
						))}
					</li>
				);
			})}
		</ul>
	) : (
		<span>No Data</span>
	);
};

api

useGoogleSpreadsheet

-   params @{string} shareUrl or sheetId
-   params @{string} apiKey (optional)
-   returns @{object}
    -   rows @{array}
    -   isFetching @{boolean}
You can’t perform that action at this time.