tgoop.com/React_lib/665
Create:
Last Update:
Last Update:
Сегодня покажу вам, как в React удобно работать с формами на базе react-hook-form. Это мой go-to инструмент для любых форм в проектах.
Почему именно react-hook-form?
- ⚡ Быстрее, чем Formik (нет лишних ререндеров)
- 🔍 Простая валидация через yup или zod
- 🔌 Легко интегрируется с UI-библиотеками (MUI, Ant Design, Tailwind)
Минималистичный пример:
import { useForm } from "react-hook-form";
export default function MyForm() {
const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("email")} placeholder="Email" />
<input type="submit" />
</form>
);
}
Интеграция с Yup:
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
const schema = yup.object({
email: yup.string().email().required(),
}).required();
export default function ValidatedForm() {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register("email")} />
<p>{errors.email?.message}</p>
<button type="submit">Отправить</button>
</form>
);
}
🔥 Очень советую попробовать на новом проекте. Работать с формами становится не только проще, но и приятно.
✍️ @React_lib
BY React
Share with your friend now:
tgoop.com/React_lib/665