gem-hunter

Zod Form Renderer

Table of Contents

Installation

npm install -S zod-form-renderer zod react-hook-form @hookform/resolvers

Documentation

Creating a zod schema

export const mySchema = z.object({
  title: z.enum(['', 'Dr.', 'Prof.']),
  name: z.string(),
  birthday: z.coerce.date(),
  age: z.number(),
  accept: z.boolean(),
});

Creating a field renderer

import { ComponentPropsWithRef } from 'react';
import { useFieldRendererContext } from 'zod-form-renderer';

// Use input props as for any React component
export type TextRendererProps = ComponentPropsWithRef<'input'> & {
  label: string;
};

export const TextRenderer = (props: TextRendererProps) => {
  // The zod-form-renderer will automatically provide the field
  // name, schema and form context to use in the renderer.
  const { name, schema, form } = useFieldRendererContext();

  // React to errors in the field state
  const error = form.formState.errors?.[name];

  return (
    <div>
      <label htmlFor={name}>
        {props.label}
        {schema.isOptional() && ` (Optional)`}
      </label>
      <br />

      <input id={name} {...form.register(name)} {...props} />
      <br />
      <p style={{ color: 'red' }}>{error?.message?.toString()}</p>
    </div>
  );
};

Setting up a type renderer map

import { createRendererMap } from 'zod-form-renderer';

// Provide renderers for all these required types
export const myRendererMap = createRendererMap({
  Enum: SelectRenderer,
  String: TextRenderer,
  Number: NumberRenderer,
  Boolean: CheckboxRenderer,
  Date: DatepickerRenderer,
  Default: DefaultRenderer,
  Submit: SubmitButton,
});

Setting up a FormRenderer instance

import { FormRenderer } from 'zod-form-renderer';

<FormRenderer
  schema={mySchema}
  typeRendererMap={myRendererMap}
  useFormProps={{
    // Under the hood, react-hook-form is used.
    // Apply any form behavior you'd like
    defaultValues: {
      name: 'John Doe',
    },
  }}
  onSubmit={(values) => {
    console.log(values);
  }}
>
  {({ controls: { Title, Name, Birthday, Age, Accept, Submit } }) => (
    <>
      <Title
        label="My Title"
        options={[
          { value: '', label: 'None' },
          { value: 'Dr.', label: 'Dr.' },
          { value: 'Prof.', label: 'Prof.' },
        ]}
      />
      <Name label="My Name" />
      <Birthday label="My Birthday" />
      <Age label="My Age" />
      <Accept label="I Accept" />
      <Submit>{"Let's go!"}</Submit>
    </>
  )}
</FormRenderer>;

Using react-hook-form options

<FormRenderer /** props... **/>
  {({
    controls: {
      /** ... **/
    },
    form,
  }) => {
    const hasAccepted = form.watch('accept');

    return (
      <>
        {/** Other form fields **/}

        <Accept label="I Accept" />
        <Submit disabled={!hasAccepted}>Let's go!</Submit>
      </>
    );
  }}
</FormRenderer>

Overwriting default form fields

// Define a FileUploadRenderer with <input type="file">.
import { FileUploadRenderer, FileUploadRendererProps } from '...';

<FormRenderer
  schema={...}
  typeRendererMap={myRendererMap}
  fieldRendererMap={{
    myImage: FileUploadRenderer,
  }}
  onSubmit={...}
>
  {({ controls: { MyImage, Submit } }) => (
    <>
      <MyImage<FileUploadRendererProps> />
      <Submit>Upload</Submit>
    </>
  )}
</FormRenderer>

Contributing

Code of Conduct

Want to help?

Security

License