Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danielstorey/react-google-sheet-connector
Load data from a Google spreadsheet into your react components
https://github.com/danielstorey/react-google-sheet-connector
Last synced: 8 days ago
JSON representation
Load data from a Google spreadsheet into your react components
- Host: GitHub
- URL: https://github.com/danielstorey/react-google-sheet-connector
- Owner: danielstorey
- License: mit
- Created: 2017-03-22T21:01:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-04-19T13:44:37.000Z (over 7 years ago)
- Last Synced: 2024-09-18T06:52:56.205Z (about 2 months ago)
- Language: JavaScript
- Size: 18.6 KB
- Stars: 35
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-google-sheet-connector
Load data from a Google spreadsheet into your react components
## Installation
`npm install --save react-google-sheet-connector`
## Overview
Firstly the data must be initialized by using the `` component. You then have the ``, `` and `` components at your disposal as well as the highly versatile `connectToSpreadsheet` helper.
## Initialization
Initialise the data like so:
You may use either `apiKey` or `clientId`. Please note that for data to be accessible using just the API Key the spreadsheet sharing must be set so that anyone with the link can view.
```javascript
import ReactGoogleSheetConnector from "react-google-sheet-connector"
} >
This content will be rendered once the data has been fetched from the spreadsheet.
```
### connectToSpreadsheet
The following example shows how to connect a component to the Spreadsheet. The component should be passed as an argument into the `connectToSpreadsheet` function included in this module.
```javascript
import { connectToSpreadsheet } from "react-google-sheet-connector"
const MyComponent = (props) => {
return (
{
props.getSheet("Sheet Name")
.map((row, i) =>
JSON.stringify(row)
)
}
)
}
export default connectToSpreadsheet(MyComponent)
```
This exposes the `getSheet` method to the component's props. `getSheet` takes one argument which is the name of the sheet and return an instance of `SheetData`.
## SheetData
This is the object that is used to operate on and render data. `SheetData` contains methods to help you process and render the data. These methods are as follows:
>#### filter
>This method takes a single object as an argument. The keys should be the camel-case names of the column title and the values should be the respective values of those columns. For example, to get the rows where the "Item Category" column is equal to "Sports & Leisure":
>
>`.filter({itemCategory: "Sports & Leisure"})`
>
>This method returns the `SheetsData` instance for chaining.
>
>#### group
>This method accepts one argument which is the title of the column you wish to group the data by. When grouped the data is split into an array of objects containing `name` and `values` properties. The `name` is the value for that particular group and the `values` the corresponding rows. E.g.
>
>`.group("Item Category")`
>
>This method returns the `SheetsData` instance for chaining.
>
>#### sort
>This method accept one argument which is the title of the column you with to sort the data by. If your data has already been grouped then each group's `values` will be sorted by the specified column. E.g.
>
>`.sort("Item Category")`
>
>This method returns the `SheetData` instance for chaining.
>
>#### reverse
>This method reverses the data and returns the `SheetData` instance.
>
>#### map
>Use this as you would a regular array, once you have processed and are ready to render your data. Each row contains indexed values, as a regular array and also key-value pairs where the key is the column title converted to camelCase.
>
>#### getData
>This method returns an array of the original data rows from the sheet where each row contains indexed values and key-value pairs
>
>#### getCurrentData
>This method returns the data after other methods e.g. `filter` and `group` have been applied.
### Method Chaining
Methods can be chained before finally rendering using `.map`. Here's an example:
```javascript
props.getSheet("Sheet 1")
.filter({inStock: "y"})
.group("Product Type")
.sort("Product Name")
.reverse()
.map((group, i) =>
{group.name}
{
group.values.map((row, j) =>
)
}
)
```
## Components
### GoogleSheet
The `` component injects data from the given sheet into the component specified as its `child` prop. You may also specify filter, group and sort props which work as described above.
```javascript
import { GoogleSheet } from "react-google-sheet-connector"
```
### GoogleRoute
This component should be used as the `component` prop in a React Router `` component. By setting additional props on the component data will be passed from the specified sheet into the `child` component. In the example below data from the "Sheet 1" sheet will be passed into the props of ``. You may also use the filter, group and sort props as described above.
```javascript
import { GoogleRoute } from "react-google-sheet-connector"
```
### GoogleTable
This component renders a sheet from your Spreadsheet into an HTML table. As well as the props in the example below you may also assign `id` and `className` attributes to the component as well as `filter` as per the GoogleSheet example.
```javascript
import { GoogleTable } from "react-google-sheet-connector"
```