Ionic React + Firebase: React Hook Form

Get user input and put it into Firestore

Here is an example of a React Hook Form that I’ve built in an application, as well as some details about how the form works.

It’s hard to find more advanced examples of React Hook Forms so I added several moving parts to this form, including using Firestore and additional form packages.

I want to preface the code for this form by encouraging you to take this code and make it better! There are a ton of ways to make React Hook Forms more complex and useful.

Here is what the form looks like:

First, you’ll need to use a couple of useful packages:

In order for this code to work, you’d also need to have a project already up and running on Firebase, and you’ll also need to have Google validation set up.

You can enable Google as a Sign-in method in your Firebase project.

Install these packages

npm install --save react-firebase-hooks 
npm install react-hook-form

See Full Code At The Bottom

Imports

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonGrid, IonCol, IonRow, IonLabel, IonInput, IonList, IonItem, IonButton, IonText, IonIcon, IonChip} from '@ionic/react';

Import some Ionic Components.

import React, { useState } from 'react';

Import useState for monitoring and changing state in React hooks.

import { useAuthState } from 'react-firebase-hooks/auth';

Import useAuthState for retrieving and using authentication in Firebase.

import firebase from 'firebase';

Import firebase.

import { useForm, Controller } from 'react-hook-form';

Import useForm and Controller which is the form that comes from React Hook Forms and a controller to handle the form fields, rules, validation, default values, and those sorts…