v0.3.0

What's Changed

New packages

• Conform now provides an official schema resolver for yup (#15)

Breaking Changes

• useControlledInput now returns the props to be applied on the input element instead of giving you an element directly (#19)

import { useFieldset, useControlledInput } from '@conform-to/react';
import { Select, MenuItem } from '@mui/material';

function MuiForm() {
  const [fieldsetProps, { category }] = useFieldset(schema);
  const [inputProps, control] = useControlledInput(category);

  return (
    <fieldset {...fieldsetProps}>
      {/* Render a shadow input somewhere */}
      <input {...inputProps} />

      {/* MUI Select is a controlled component */}
      <Select
        label="Category"
        value={control.value}
        onChange={control.onChange}
        onBlur={control.onBlur}
        inputProps={{
          onInvalid: control.onInvalid
        }}
      >
        <MenuItem value="">Please select</MenuItem>
        <MenuItem value="a">Category A</MenuItem>
        <MenuItem value="b">Category B</MenuItem>
        <MenuItem value="c">Category C</MenuItem>
      </TextField>
    </fieldset>
  )
}

• useFieldList now expects a form / fieldset ref and support form reset event properly (#20)
• useForm no longer accept the onReset property. Just use the form onReset event listener if needed (#21)
• useFieldset no longer returns the FieldsetProps, instead it expect a ref object of the form or fieldset element (#21)
• The field information returned from useFieldset now groups all of the data as config except error as it is a field state (#21)
• The parse function exported from @conform-to/zod is now merged with resolve (#22)
• Introduced a new helper ifNonEmptyString for zod schema preprocess configuration (#24)

import { z } from 'zod';
import { resolve, ifNonEmptyString } from '@conform-to/zod';

const schema = resolve(
  z.object({
    // No preprocess is needed for string as empty string
    // is already converted to undefined by the resolver
    text: z.string({ required_error: 'This field is required' }),

    // Cast to number manually
    number: z.preprocess(
      ifNonEmptyString(Number),
      z.number({ required_error: 'This field is required' }),
    ),

    // This is how you will do it without the helper
    date: z.preprocess(
      (value) => (typeof value === 'string' ? new Date(value) : value),
      z.date({ required_error: 'This field is required' }),
    ),
  }),
);

Improvements

• refactor: simplify zod resolver setup in #16
• chore: demonstrate features with additional examples in #23
• chore: docs update in #25

Full Changelog: v0.2.0...v0.3.0