conform-to-valibot

Conform helpers for integrating with Valibot

Installation

1npm install @conform-to/react valibot conform-to-valibot

API Reference

• parseWithValibot
• getValibotConstraint

parseWithValibot

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.

1import { useForm } from '@conform-to/react';
2import { parseWithValibot } from 'conform-to-valibot';
3import { object, string } from 'valibot';
4
5const schema = object({
6  email: string('Email is required' ),
7  password: string('Password is required' ),
8});
9
10function ExampleForm() {
11  const [form, { email, password }] = useForm({
12    onValidate({ formData }) {
13      return parseWithValibot(formData, {
14        schema,
15      });
16    },
17  });
18
19  // ...
20}

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

1import { useForm } from '@conform-to/react';
2import { parseWithValibot } from 'conform-to-valibot';
3import { object } from 'valibot';
4
5const schema = object({
6  // Define the schema with valibot
7});
8
9export async function action({ request }) {
10  const formData = await request.formData();
11  const submission = await parseWithValibot(formData, {
12    schema,
13  });
14
15  // Send the submission back to the client if the status is not successful
16  if (submission.status !== 'success') {
17    return submission.reply();
18  }
19
20  // ...
21}

getValibotConstraint

A helper that returns an object containing the validation attributes for each field by introspecting the valibot schema.

1import { getValibotConstraint } from "conform-to-valibot";
2import { useForm } from "@conform-to/react";
3import { object, string, minLength, maxLength, optional } from "valibot";
4
5const schema = object({
6  title: string([minLength(10), maxLength(100)]),
7  description: optional(string([minLength(100), maxLength(1000)])),
8});
9
10function Example() {
11  const [form, fields] = useForm({
12    constraint: getValibotConstraint(schema),
13  });
14
15  // ...
16}