{"id":17137966,"url":"https://github.com/lourd/react-google-sheet","last_synced_at":"2025-04-13T09:51:43.263Z","repository":{"id":76099065,"uuid":"118671214","full_name":"lourd/react-google-sheet","owner":"lourd","description":"Pulling data from Google Sheets with React components","archived":false,"fork":false,"pushed_at":"2018-02-22T19:57:29.000Z","size":883,"stargazers_count":26,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T01:12:58.400Z","etag":null,"topics":["api-client","data-science","google-sheets","javascript","react","spreadsheets"],"latest_commit_sha":null,"homepage":"https://lourd.github.io/react-google-sheet","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lourd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-23T21:19:10.000Z","updated_at":"2025-02-04T22:35:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"1e304987-7e08-43bc-8cd4-85a3179cea78","html_url":"https://github.com/lourd/react-google-sheet","commit_stats":{"total_commits":56,"total_committers":1,"mean_commits":56.0,"dds":0.0,"last_synced_commit":"35919f2ec28880e9195397974e9100414d679980"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lourd%2Freact-google-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lourd%2Freact-google-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lourd%2Freact-google-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lourd%2Freact-google-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lourd","download_url":"https://codeload.github.com/lourd/react-google-sheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248695301,"owners_count":21146952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-client","data-science","google-sheets","javascript","react","spreadsheets"],"created_at":"2024-10-14T20:08:22.909Z","updated_at":"2025-04-13T09:51:43.242Z","avatar_url":"https://github.com/lourd.png","language":"JavaScript","readme":"# @lourd/react-google-sheet [![npm package badge][npm-badge]][npm] [![Build status][travis badge]][travis]\n\n[npm-badge]: https://img.shields.io/npm/v/@lourd/react-google-sheet.svg?style=flat-square\n[npm]: https://www.npmjs.com/package/@lourd/react-google-sheet\n[travis badge]: https://travis-ci.org/lourd/react-google-sheet.svg\n[travis]: https://travis-ci.org/lourd/react-google-sheet\n[site]: https://lourd.github.io/react-google-sheet\n[api component]: https://github.com/lourd/react-google-api\n\nEasily use data from Google Sheets in your React application with the [`GoogleSheet`](#googlesheet) component.\n\n## Background\n\nThe 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](https://developers.google.com/sheets/api/quickstart/js).\n\nUnder the hood this is using the generic [`@lourd/react-google-api`][api component] module for handling loading and initializing the Google API JavaScript client library.\n\n## Example\n\nThere are just a couple steps to using the [example app][site]. The source is in the [`example` directory](./example).\n\n1. Click the `Authorize` button and allow the site to have access to your Google Sheets data\n2. 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**.\n3. Choose a range of the spreadsheet, e.g. `Tab 1!2:12`\n\nYou can also use your own API key and application ID that you made on the [Google APIs console](https://console.developers.google.com/apis/credentials).\n\n## Installation\n\n```sh\nyarn add @lourd/react-google-sheet\n# or\nnpm install --save @lourd/react-google-sheet\n```\n\n### Browser\n\nAvailable as a simple `\u003cscript\u003e` through unpkg.com. The module will be available as the global variable `ReactGoogleSheet`.\n\n#### Development\n\n```html\n\u003cscript src=\"https://unpkg.com/react/umd/react.development.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@lourd/react-google-sheet/dist/index.umd.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\n#### Production\n\n```html\n\u003cscript src=\"https://unpkg.com/react/umd/react.production.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@lourd/react-google-sheet/dist/index.umd.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\n## Reference\n\n```js\nimport { GoogleSheet, GoogleSheetsApi } from '@lourd/react-google-sheet'\n```\n\n### [`\u003cGoogleSheetsApi/\u003e`](./modules/GoogleSheetsApi.js)\n\nThis 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](./example/src/App.js#L9-L32)\n\n| Property | Type       | Required | Default                                                     | Description                                                  |\n| :------- | :--------- | :------- | :---------------------------------------------------------- | :----------------------------------------------------------- |\n| scopes   | `[string]` | no       | `['https://www.googleapis.com/auth/spreadsheets.readonly']` | The authorization scopes being requested for the API client. |\n\n### [`\u003cGoogleSheet/\u003e`](./modules/GoogleSheet.js/)\n\n| Property | Type     | Required | Description                           |\n| :------- | :------- | :------- | :------------------------------------ |\n| id       | `string` | yes      | The id of the spreadsheet             |\n| range    | `string` | yes      | The range of cells in the spreadsheet |\n\nThs 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](./example/src/DynamicSpreadsheet.js#L21-L33)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flourd%2Freact-google-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flourd%2Freact-google-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flourd%2Freact-google-sheet/lists"}