react-google-sheets - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

package.json

 {
     "name": "react-google-sheets",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "Read and Write data using Google Sheets API in react",
@@ -5,0 +5,0 @@ "scripts": {

README.md

 # react google sheets
 
-Simplely Add Google Sheets API to your react app
+Simplely Add Google Sheets API to your react app
+
+# Quickstart
+
+## First, install the library:
+```shell
+npm install --react-google-sheets
+```
+
+or 
+
+```shell
+yarn add react-google-sheets
+```
+
+## Second, Turn on the Google Sheets API:
+
+- Use this [wizard](https://console.developers.google.com/flows/enableapi?apiid=sheets.googleapis.com) to create or select a project in the Google Developers Console and automatically turn on the API. Click **Continue**, then **Go to credentials**.
+
+- On the **Add credentials to your project** page, click the **Cancel** button.
+
+- At the top of the page, select the **OAuth consent screen** tab. Select an **Email address**, enter a **Product name** if not already set, and click the Save button.
+- Select the **Credentials** tab, click the **Create credentials** button and select **OAuth client ID**.
+- Select the application type **Other**, enter the name "React Google Sheets Quickstart", and click the **Create** button.
+
+## Finally, Use the library:
+
+```javascript
+import ReactGoogleSheets from 'react-google-sheets';
+
+
+class DataComponent extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      sheetLoaded: false,
+    }
+  }
+  render() {
+    return (
+      <ReactGoogleSheets 
+        clientId={YOUR_CLIENT_ID}
+        apiKey={YOUR_API_KEY}
+        spreadsheetId={YOUR_SPREADSHEET_ID}
+        afterLoading={() => this.setState({sheetLoaded: true})}
+      >
+        {this.state.sheetLoaded ? 
+          <div>
+            {/* Access Data */}
+            {console.log('Your sheet data : ', this.props.getSheetsData({YOUR_SPREADSHEET_NAME}))}
+            {/* Update Data */}
+            <button onClick={() => {
+              this.props.updateCell(
+                'sheet02', // sheetName
+                'E', // column
+                13, // row
+                'Apple', // value
+                null, // successCallback
+                (error) => {
+                  console.log('error', error)
+                } // errorCallback
+              );
+            }}>update cell!</button>
+          </div>
+          :
+          'loading...'
+        }
+      </ReactGoogleSheets>
+    )
+  }
+}
+
+export default ReactGoogleSheets.connect(DataComponent);
+
+
+```
+
+
+That's It!

No alert changes

Improved metrics

Number of lines in readme file

82

increased by2633.33%

Worsened metrics

Total package byte prevSize

53886

decreased by-53.62%

Number of package files

11

decreased by-8.33%

No dependency changes