Skip to content
react hook for using google spreadsheet as a data table (API endpoint)
JavaScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
example
src
.gitignore
.prettierrc
README.md
babel.config.js
package-lock.json
package.json

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.