Skip to content

createForm

A utility that creates a closure that encapsulates all the functionality of react-hook-form’s useForm hook and zod .

Props

zodSchema

  • Defines the validation schema of your form using "z" object from zod. This will also enables typescript type safety and code auto complete specially while using the ctx object.
import { z } from "zod";
import { createForm } from "react-geek-form";


const { forwardFormContext, ... } = createForm({
  zodSchema: z.object({
    email: z.string().min(1, 'Required'),
    password: z.string().min(1, 'Required'),
  })
})

Returns

forwardFormContext

  • Wraps your form component and injects the ctx object to the second parameter (just like the react's forwardRef).
  • Adds optional onInitializedFormContext prop to wrapped component.
const { forwardFormContext, ... } = createForm({
  ...
})


const LoginForm = forwardFormContext((props, ctx) => {
  return (
    ...
  )
});


const App = () => {
  return (
    <LoginForm
      onInitializedFormContext={(ctx) => {
        // do anything with ctx
        // e.g. ctx.getValues() to get the form values outside the component!
      }}
    />
  );
};

withFieldContext

  • Wraps custom field component and pass appropriate props such as “register” or “control” and “error”.
  • Adds type safety / auto complete to name prop.
  • Requirements;
    • Field component that will be wrap must have “register” or “control” and “name” props.
type Props = {
  name: string,
  register: UseFormRegister<any>,
};


const CustomInput = ({ name, register }: Props) => {
  return <input {...register(name)} />;
};


const { withFieldContext, ... } = createForm({
  ...
})


const Input = withFieldContext(CustomInput);
  • OtherCustomFields (If you use createGeekFormInstace)