Formik - бібліотека роботи з формами у react

Установка Formik

npm install formik

Використання

В HTML-документі компонент Form рендерить звичайний тег form, але з розширеним функціоналом бібліотеки Formik. Для того, щоб можна було відправити форму, використовуємо тег button, для кнопки відправки в бібліотеці немає спеціального компонента.

import { Formik, Form } from 'formik';
const FeedbackForm = () => {
return (
<Formik initialValues={{}} onSubmit={() => {}}>
<Form>
<button type="submit">Submit</button>
</Form>
</Formik>
);
};

Елементи форми

В бібліотеці Formik немає компонентів для створення label та інших семантичних елементів форми, таких як fieldset та legend. Для цього використовуються звичайні теги. Не забуваємо використовувати хук useId для створення унікальних ідентифікаторів полів.

import { useId } from "react";
import { Formik, Form, Field } from "formik";
const initialValues = {
username: "",
email: "",
};
const FeedbackForm = () => {
const nameFieldId = useId();
const emailFieldId = useId();
const handleSubmit = (values, actions) => {
console.log(values);
actions.resetForm();
};
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
<Form>
<label htmlFor={nameFieldId}>Username</label>
<Field type="text" name="username" id={nameFieldId} />
<label htmlFor={emailFieldId}>Email</label>
<Field type="email" name="email" id={emailFieldId} />
<button type="submit">Submit</button>
</Form>
</Formik>
);
};