@conform-to/react 0.3.0

v0.3.0

on Node.js NPM

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>
  )
}

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' }),
    ),
  }),
);