REACT_LIB Telegram 665
Сегодня покажу вам, как в 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



tgoop.com/React_lib/665
Create:
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

View MORE
Open in Telegram


Telegram News

Date: |

4How to customize a Telegram channel? Private channels are only accessible to subscribers and don’t appear in public searches. To join a private channel, you need to receive a link from the owner (administrator). A private channel is an excellent solution for companies and teams. You can also use this type of channel to write down personal notes, reflections, etc. By the way, you can make your private channel public at any moment. "Doxxing content is forbidden on Telegram and our moderators routinely remove such content from around the world," said a spokesman for the messaging app, Remi Vaughn. How to Create a Private or Public Channel on Telegram? To edit your name or bio, click the Menu icon and select “Manage Channel.”
from us


Telegram React
FROM American