Elmar | React hook form

This is a snippet i use in all my React projects. A wrapper for the react-hook-form useForm hook that takes in a schema to make it type-safe and it returns a FormField component that removes the need for having to add the control prop to the FormField component.

      import { z } from "zod";

import { useForm } from "./use-form";

const AddressForm = () => {
  const form = useForm({
    schema: z.object({
      street: z.string(),
      city: z.string(),
    }),
  });

  return (
    <form>
      <form.Field name="street">
        {({ field }) => <input {...field} />}
      </form.Field>
      <form.Field name="street
city
">   
        {({ field }) => <input {...field} />}
      </form.Field>
    </form>
  );
};