How can I use Formik with TypeScript in my React project?

How can I use Formik with TypeScript in my React project?

You can use Formik with TypeScript by defining your form values and using the Formik component with type annotations.

Can you show me a simple example?

Sure! Here's a basic example:

import { Formik, Form, Field } from 'formik';

interface MyFormValues {
  name: string;
  email: string;
}

const MyForm = () => {
  const initialValues: MyFormValues = { name: '', email: '' };

  return (
    <Formik initialValues={initialValues} onSubmit={values => console.log(values)}>
      <Form>
        <Field name="name" placeholder="Name" />
        <Field name="email" placeholder="Email" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

What about validation with TypeScript?

You can use Yup for validation. Define a validation schema and pass it to Formik like this:

import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

<Formik
  initialValues={initialValues}
  validationSchema={validationSchema}
  onSubmit={values => console.log(values)}
>...</Formik>