Google sheets Using React TypeScript

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.

npm install semantic-ui-react semantic-ui-css
import 'semantic-ui-css/semantic.min.css'

Step 4

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

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>);
};
// api.tsexport const GOOGLE_SHEET_API_LINK ="the link of your google sheets will be right 
interface GoogleSheetForm {name: string;age: string;salary: string;hobby: string;}
const [form, setForm] = useState<GoogleSheetForm>({name: "",age: "",salary: "",hobby: "",});
import { GOOGLE_SHEET_API_LINK } from "../config/api";
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");}};

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 :

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store