[RFC] ppx react-hook-form

There were a few attempts within the team to bind the library, react-hook-form, but the usability wasn’t great - it ended up being a hard to use binding. So I thought I would try to improve the usability by creating a ppx, which I recently started.

I created a ppx so that a basic example could be represented like this.

@rhf
type inputs = {
  example?: string,
  exampleRequired: string,
}

@react.component
let make = () => {
  let {register, handleSubmit, watch, formState: {errors}} = useFormOfInputs()
  let onSubmit = (data: inputs) => Js.log(data)

  Js.log(watch(Example))

  <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register(Example)} defaultValue="test" />
    <input {...register(ExampleRequired, ~options={required: true})} />
    {errors.exampleRequired ? <span> {"This field is required"->React.string} </span> : React.null}
    <input type_="submit" />
  </form>
}

For usability reasons, our team’s future plans are to develop support for Controlled Inputs and useFieldArray.

I’d like to hear how you’re using react-hook-form.

  • How are you using react-hook-form in your ReScript projects (interop?, using .tsx?)
  • What APIs do you use a lot besides useFieldArray?
  • Any thought about ppx?
4 Likes

Published @greenlabs/ppx-rhf - npm

2 Likes

Examples: https://github.com/green-labs/ppx_react_hook_form/blob/main/doc/examples.md

1 Like