Google sheets Using React TypeScript

Hey guys, I started learning typescript react in a while, I have found this combination is wonderful. I don’t know if you are familiar with typescript or react, but I want you to know that typescript is powerful for those who like working with javascript. If you want to start mastering react you should start implementing Typescript. I have created a simple app using it and I want to share it with you.

TypeScript for React developers in 2020

Let’s Get Started

Posting data to APIs has never been easy. But have you ever used React to post form data to Google Sheets? If not, then this tutorial is for you. Today, we are going to talk about how to POST form data from React to Google Sheets like REST APIs.

Step 1

To get started, you can use create-react-app to set up your React app. Just type npx create-react-app react-googlesheets — template typescriptSetting up the project directory and using — template typescript will set up everything for you, including the ts.config file and the typescript structure, etc.

Step 2

Install Semantic UI.

Semantic UI is a framework used to design and develop beautiful and responsive layouts. It has components for Buttons, Containers, Lists, Inputs, and much more.

To install Semantic UI in your React application, use the following command:

npm install semantic-ui-react semantic-ui-css

After it has done installing, open the index.js file and import the following at the top:

import 'semantic-ui-css/semantic.min.css'

Now, run the app using the command npm start.

Step 4

Personally, I use the following structure and it seems organized for me.

inside the src folder, I usually create a folder with a name style that holds all the CSS files that I will create. Pages folder that holds all the components, config folder that holds all the typescript file like exporting some file that you don’t want to push to Github or I usually place my router there as well. Do not worry I will leave you the Github repo for explaining it well.

First thing let’s create a this component in the pages folder with name Form.tsx

import axios from "axios";import React, { ChangeEvent, useState } from "react";import { Button, Form, Container, Header } from "semantic-ui-react";import "../style/Form.css";export const FormComponent: React.FC<{}> = (props) => {return (<div><Container fluid className="container"><Header as="h2">React Google Sheets!</Header><Form className="form"><Form.Field><label>Name</label><inputplaceholder="Enter your name"name="name"required/></Form.Field><Form.Field><label>Age</label><inputplaceholder="Enter your age"name="age"
required
/>
</Form.Field><Form.Field><label>Salary</label><inputplaceholder="Enter your salary"name="salary"required/></Form.Field><Form.Field><label>Hobby</label><inputplaceholder="Enter your hobby"name="hobby"required/></Form.Field><Button color="blue" type="submit" >
Submit
</Button>
</Form>
</Container></div>);
};

It will look like this picture below.

Now, lets add ts file in the config folder with the name api.ts

// api.tsexport const GOOGLE_SHEET_API_LINK ="the link of your google sheets will be right 

Before we jump to the google sheets API, let's add an interface for our form and add the functionality.

you can add an interface by typing interface than the name of it, and likely the interface looks like an object but inside it, you need to define the type and what are the elements that must behold in the object or function, etc..

Let’s add it:

interface GoogleSheetForm {name: string;age: string;salary: string;hobby: string;}

Now let’s use Hooks and create our form variable that will be holding all the data input and specified with the previous interface.

const [form, setForm] = useState<GoogleSheetForm>({name: "",age: "",salary: "",hobby: "",});

We’re close to being done now we just need to import our google sheets API URL and use it in the submit function that we’ll be creating in a minute.

let’s import it:

import { GOOGLE_SHEET_API_LINK } from "../config/api";

now let’s create that function and use this URL.

const onSubmitForm: Function = () => {if (form.name !== "" ||form.age !== "" ||form.hobby !== "" ||form.salary !== "") {axios.post(GOOGLE_SHEET_API_LINK, form).then(({ data }) => {swal("Good job!", "You clicked the button!", "success");}).catch((err) => swal(err.message, "Warning!", "warning"));} else {swal("please fill out the form!", "Warning!", "warning");}};

You have been wondering how to get the URL from google sheets. it's quite simple just follow these steps.

Open a new Spreadsheet by clicking File, then New, and then Spreadsheet.

Name the sheet to the name of your choice and save it.

Click the share button on the top right of your screen, and edit the permission to public.

Copy the link and go tosheets_bestand create your free account.

Create a new connection and paste your copied URL from the Google Sheets in the connection URL box.

Click on connect. You’ll be redirected to your connections page. Here, you can see all your connections. Click on the details of your new connection.

Copy the CONNECTION URL. This URL will be used as the endpoint for sending POST Requests.

Now, let’s install Axios. Type npm install axios in your terminal to install the package.

After it has been installed, import it at the top of your file.

Now, open up Google Sheets and fill up the first columns, that is name, age, salary, and hobby. Please fill them out carefully, or else it will not work. It should be case-sensitive.

Now, run your React app and fill in the input fields. You’ll see that the data is getting populated into your Google Sheets one by one.

Finally

We’re done, that’s how you can implement google sheets in your react app for future features. If you want to take a look at my code you can find it easily in the Github repo.
follow me on my social account :

Github
LinkedIn

here is my portfolio:
Portfolio

If you want master something teach it.