How can I integrate Formik with UI libraries?

How can I integrate Formik with UI libraries like Material-UI?

You can integrate Formik with Material-UI by using the TextField component and connecting it with Formik's Field component.

Can you show me a code example?

Sure! Here's a simple example:

import { Formik, Form, Field } from 'formik';
import TextField from '@mui/material/TextField';

const MyForm = () => (
  <Formik
    initialValues={{ name: '' }}
    onSubmit={values => console.log(values)}
  >
    {({ handleSubmit }) => (
      <Form onSubmit={handleSubmit}>
        <Field
          name="name"
          as={TextField}
          label="Name"
          variant="outlined"
        />
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

This will render a Material-UI text field connected to Formik.

What about using it with Ant Design?

For Ant Design, you can use the Form.Item component along with Formik's Field. Here's an example:

import { Formik, Form, Field } from 'formik';
import { Input, Button } from 'antd';

const MyForm = () => (
  <Formik
    initialValues={{ name: '' }}
    onSubmit={values => console.log(values)}
  >
    {({ handleSubmit }) => (
      <Form onSubmit={handleSubmit}>
        <Field name="name">
          {({ field }) => <Form.Item label="Name"><Input {...field} /></Form.Item>}
        </Field>
        <Button type="primary" htmlType="submit">Submit</Button>
      </Form>
    )}
  </Formik>
);

This integrates Formik with Ant Design's Input component.