form/tutorial

Build form like a pro 😎 － 100% composible fashion (ie., no render-props) of using React Hook Form with Zod.

Tutorial 1: Firebase App Registration

Let's first take a look of what we gonna build just visually:

I don't suggest you to review the corresponding code at least now.

It looks damn simple from the surface, right? But it's not in terms of the implementation complexity. To be fair, it's quite complicated!

It's in fact, however, a great example to show how to build a complex form with RHF in the right way!

1️⃣ RHF's `form` & `formState`

If you are really heavily playing the demo incredibly carefully in many scenarios, you will find out lots of states are going on in the background; to well control those states, we need to access RHF's form and formState by using setForm and setFormState props on the <Form>:

Note: we use useForm under the hood, and form is just the return value from that.

const [form, setForm] = useState(undefined);
const [formState, setFormState] = useState(undefined);
// ...
<Form
  setForm={setForm}
  setFormState={setFormState}
  // ...
>

If you're experienced with RHF, you might already know formState can be accessed from form, but in fact the formState getting from that way is different than what we're doing here (yeah, shocking), so you can't do so, otherwise things will break.

2️⃣ The challengs

Async validation/Schema
Disabling state control
...

WIP...

(this tutorial is just fu*king hard to write, and I'm just still working on it, but in the mean time, you can review the code yourself in the demo 😂)

Tutorial 2: Stripe Payment Method