How can I use Yup with TypeScript for form validation?

How can I use Yup with TypeScript for form validation?

You can use Yup with TypeScript by defining a schema that describes the shape of your data. Here's a basic example.

Can you show me a simple schema for a user registration form?

Sure! Here's a simple Yup schema for a user registration form:

import * as Yup from 'yup';

const registrationSchema = Yup.object().shape({
  username: Yup.string().required('Username is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
});

How do I integrate this schema with a React form?

You can integrate it using Formik. Here's a quick example:

<Formik
  initialValues={{ username: '', email: '', password: '' }}
  validationSchema={registrationSchema}
  onSubmit={values => { /* handle form submission */ }}
>
  {({ handleChange, handleSubmit }) => (
    <Form onSubmit={handleSubmit}>
      <Field name="username" onChange={handleChange} />
      <Field name="email" onChange={handleChange} />
      <Field name="password" type="password" onChange={handleChange} />
      <button type="submit">Register</button>
    </Form>
  )}
</Formik>