Example Request: Custom form hook that takes generic schema

[dan-gamble]

I've been trying to work out how the useForm returns the correct Schema generic when it's passed a zod schema but I can't work it out.

I have a custom hook I want to use that looks like this

function useLocalForm<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]> (
  options: Pretty<
    Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
    /**
     * The form id. If not provided, a random id will be generated.
     */
    id?: string;

    /**
     * Enable constraint validation before the dom is hydated.
     *
     * Default to `true`.
     */
    defaultNoValidate?: boolean;
  }>, { schema }: { schema: ZodTypeAny }) {
  const [form, fields] = useForm({
    id: options.id,
    constraint: getZodConstraint(schema),
    onValidate ({ formData }) {
      return parseWithZod(formData, { schema })
    },
    shouldValidate: 'onBlur',
    shouldRevalidate: 'onInput',
    onSubmit (e) {
      e.preventDefault()
    },
  })

  return { form, fields }
}

const schema1 = z.object({
  firstName: z.string(),
})
const schema2 = z.object({
  lastName: z.string(),
})

function App () {
  const form1 = useLocalForm({ id: '1' }, { schema: schema1 })
  const form2 = useLocalForm({ id: '2' }, { schema: schema2 })

  // ...
}

However, with my hook currently the form type is form: FormMetadata<any, string[]> instead of form: FormMetadata<{firstName: string}, string[]>

How would I change the options or schema to make this work generically?

[edmundhung]

import { useForm } from '@conform-to/react';
import { parseWithZod, getZodConstraint } from '@conform-to/zod';
import { type ZodTypeAny, type input, type output } from 'zod';

function useLocalForm<Schema extends ZodTypeAny>({
    id,
    schema,
}: {
    id: string;
    schema: Schema;
}) {
    const [form, fields] = useForm<input<Schema>, output<Schema>, string[]>({
      id,
      constraint: getZodConstraint(schema),
      onValidate ({ formData }) {
        return parseWithZod(formData, { schema })
      },
      shouldValidate: 'onBlur',
      shouldRevalidate: 'onInput',
      onSubmit (e) {
        e.preventDefault()
      },
    })
  
    return { form, fields }
}

[dan-gamble]

This is amazing, thank you @edmundhung. Hopefully means I can migrate over to this awesome library now 😍