Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: restrict boolean coercion #257

Merged
merged 2 commits into from
Aug 6, 2023
Merged

Conversation

edmundhung
Copy link
Owner

@edmundhung edmundhung commented Aug 6, 2023

I think it would be too aggresive if conform coerce anything truthy to true. This restrict it to on only (i.e. the default value of checkbox). If there is a need to use custom value, it is better to be explicit:

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

const schema = z.object({
  confirmed: z.string().transform(value => value === 'yes'),
});

function Example() {
  const [form, { confirmed }] = useForm({
    onValidate({ formData }) {
      return parse(formData, { schema });
    },
  });

  return (
    <form {...form.props}>
      {/* Example 1: Custom checkbox value */}
      <div>
        <label>Confirm</label>
        <input {...conform.input(confirmed, { type: 'checkbox', value: 'yes' })} />
        <div>{confirmed.error}</div>
      </div>
      {/* Example 2: Confirmation text */}
      <div>
        <label>Type "yes" to confirm</label>
        <input {...conform.input(confirmed, { type: 'text' })} />
        <div>{confirmed.error}</div>
      </div>
      <button>Submit</button>
    </form>
  );
}

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Aug 6, 2023

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 95629c9
Status: ✅  Deploy successful!
Preview URL: https://6cfedc5f.conform.pages.dev
Branch Preview URL: https://restrict-boolean-coercion.conform.pages.dev

View logs

@edmundhung edmundhung merged commit a381460 into next Aug 6, 2023
2 checks passed
@edmundhung edmundhung deleted the restrict-boolean-coercion branch August 6, 2023 17:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant