function Example() {
  const [form, { email, password }] = useForm({
    // This is now deprecated in favor of the new configs
    initialReport: 'onBlur',

    // Define when Conform should start validation. Default `onSubmit`.
    shouldValidate: 'onBlur',

    // Define when Conform should revalidate again. Default `onInput`.
    shouldRevalidate: 'onBlur',
  });
}

The useForm hook now accepts an optional ref object. If it is not provided, conform will fallback to its own ref object instead. (#122)

function Example() {
  const ref = useRef<HTMLFormElement>(null);
  const [form, { email, password }] = useForm({
    ref,
  });

  // `form.ref / form.props.ref` will now be the same as `ref`

  return (
    <form {...form.props}>
      {/* ... */}
    </form>
  );
}

The field config now generates an additional descriptionId to support accessible input hint. (#126)

function Example() {
    const [form, { email }] = useForm();

    return (
        <form {...form.props}>
            <label htmlFor={email.id}>Email</label>
            <input {...conform.input(email, { type: "email", description: true })} />
            {/* If invalid, it will set the aria-describedby to "${errorId} ${descriptionId}" */}
            <div id={email.descriptionId}>
                Email hint
            </div>
            <div id={email.errorId}>
                {email.error}
            </div>
        </form>
    )
}

The defaultValue and initialError is no longer cached to simplify form reset. (#130)

Full Changelog: https://github.com/edmundhung/conform/compare/v0.6.0...v0.6.1

Readme

Source

@conform-to/zod

Conform helpers for integrating with Zod

API Reference

getFieldsetConstraint

This tries to infer constraint of each field based on the zod schema. This is useful for:

Making it easy to style input using CSS, e.g. :required
Having some basic validation working before/without JS

import { useForm } from '@conform-to/react';
import { getFieldsetConstraint } from '@conform-to/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().min(1, 'Email is required'),
  password: z.string().min(1, 'Password is required'),
});

function Example() {
  const [form, { email, password }] = useForm({
    constraint: getFieldsetConstraint(schema),
  });

  // ...
}

parse

It parses the formData and returns a submission result with the validation error. If no error is found, the parsed data will also be populated as submission.value.

import { useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().min(1, 'Email is required'),
  password: z.string().min(1, 'Password is required'),
});

function ExampleForm() {
  const [form, { email, password }] = useForm({
    onValidate({ formData }) {
      return parse(formData, { schema });
    },
  });

  // ...
}

Or when parsing the formData on server side (e.g. Remix):

import { useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { z } from 'zod';

const schema = z.object({
  // Define the schema with zod
});

export let action = async ({ request }) => {
  const formData = await request.formData();
  const submission = await parse(formData, {
    // If you need extra validation on server side
    schema: schema.refine(/* ... */),

    // If the schema definition includes async validation
    async: true,
  });

  if (!submission.value || submission.intent !== 'submit') {
    return submission;
  }

  // ...
};

Keywords

FAQs

What is @conform-to/zod?

Is @conform-to/zod popular?

Is @conform-to/zod well maintained?

Last updated on 29 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket

@conform-to/zod

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}v0.6.1

Improvements

@conform-to/zod

API Reference

getFieldsetConstraint

parse

Keywords

v0.6.1