npm install hookform-controller-proxy

hookform-controller-proxy

Syntax sugar for react-hook-form to make it easier to use with controlled components.

``tsx import { useForm } from "react-hook-form"; import type { FieldProps } from "hookform-controller-proxy"; import { createControllerProxy } from "hookform-controller-proxy";

interface MyFormData { foo: string; bar?: string; user: User; }

interface User { name: string; }

export function FormExampleApp() { const form = useForm(); const control = createControllerProxy(form);

return (

 alert(JSON.stringify(data)))}>
      {/ Required fields are denoted using their field name as-is /}
      {control.foo(TextField)}
      {/* 
          Optional fields are denoted using their field name followed by $
          Typescript will complain if you forget the $ for optional fields.
         */}
      {control.bar$(TextField)}
      {/ You can edit nested fields at any level using dot notation /}
      {control.user.name(TextField)}
      {/ Your field components can be for any type, in this case a User /}
      {control.user(UserField)}
      
    
  );
}
function TextField({
  name,
  value,
  onChange,
  required,
  error,
  ...rest
}: FieldProps) {
  return (
    
      {name}
              name={name}
        value={value ?? ""}
        onChange={(e) =>
          required
            ? onChange?.(e.target.value)
            : onChange?.(e.target.value || undefined)
        }
        required={required}
        {...rest}
      />
      {error}
    
  );
}

function UserField({ name, value: user, onChange, error }: FieldProps) { return ( {name} name={name} value={user?.name ?? ""} onChange={(e) => onChange?.({ name: e.target.value })} /> {error} ); }``