edmundhung/conform v1.3.0 on GitHub

Hello world! We're finally back after a bit of a break. This release is a bit small, but we hope it's the start of a more regular update schedule moving forward. I'm excited to share that @chimame has joined the team and is prepping our first valibot integration release in #876. We'll be sharing more details about the other changes as well. Thanks for your patience and stay tuned!

Custom coercion

v1.3.0 adds the ability to disable the default auto coercion behavior by setting the disableAutoCoercion option to true in parseWithZod in #871.

function Example() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, {
        schema,
        disableAutoCoercion: true,
      });
    },
  });

  // ...
}

You can then manage how the form value is parsed yourself, or use the new unstable_coerceFormValue helper to coerce form value:

import { parseWithZod, unstable_coerceFormValue as coerceFormValue } from '@conform-to/zod';
import { z } from 'zod';

// Coerce the form value with default behaviour
const schema = coerceFormValue(
  z.object({
    // ...
  })
);

// Coerce the form value with default coercion overrided
const schema = coerceFormValue(
  z.object({
    ref: z.number()
    date: z.date(),
    amount: z.number(),
    confirm: z.boolean(),
  }),
  {
    // Trim the value for all string-based fields
    // e.g. `z.string()`, `z.number()` or `z.boolean()`
    string: (value) => {
      if (typeof value !== 'string') {
         return value;
      }

      const result = value.trim();

      // Treat it as `undefined` if the value is empty
      if (result === '') {
         return undefined;
      }

      return result;
    },

    // Override the default coercion with `z.number()`
    number: (value) => {
      // Pass the value as is if it's not a string
      if (typeof value !== 'string') {
        return value;
      }

      // Trim and remove commas before casting it to number
      return Number(value.trim().replace(/,/g, ''));
    },

    // Disable coercion for `z.boolean()`
    boolean: false,
  },
);

You can also customize coercion for a specific schema by setting the customize option.

import {
  parseWithZod,
  unstable_coerceFormValue as coerceFormValue,
} from '@conform-to/zod';
import { useForm } from '@conform-to/react';
import { z } from 'zod';
import { json } from './schema';

const metadata = z.object({
  number: z.number(),
  confirmed: z.boolean(),
});

const schema = coerceFormValue(
  z.object({
    ref: z.string(),
    metadata,
  }),
  {
    customize(type) {
      // Customize how the `metadata` field value is coerced
      if (type === metadata) {
        return (value) => {
          if (typeof value !== 'string') {
            return value;
          }

          // Parse the value as JSON
          return JSON.parse(value);
        };
      }

      // Return `null` to keep the default behavior
      return null;
    },
  },
);

This helper is currently released with the unstable_ prefix to collect more feedbacks. Lock your version to the patch version range (e.g. ~1.3.0) if you want to use this feature without unexpected changes.

Other Improvements

Added coercion support with branded types (e.g. z.string().brand()) in #864. Thanks @krsilas!
Fixed CI issue with corepack in #860. Thanks @yukiomoto!
Updated docs in #761, #785, #806, #859, #877, #880. Thanks @KirillSBarsukov, @suzukisan22, @AlexWebLab!

New Contributors

@KirillSBarsukov made their first contribution in #761
@suzukisan22 made their first contribution in #806
@yukiomoto made their first contribution in #860
@krsilas made their first contribution in #864
@AlexWebLab made their first contribution in #877

Full Changelog: v1.2.2...v1.3.0