Конечная библиотека форм для реагирования, которая вам когда-либо понадобится

Всем привет, в этом уроке я покажу, как легко создавать формы с помощью пакета Createform, надеюсь, вы найдете эту статью полезной.

С библиотекой Createform создание форм и управление ими в React стало еще проще. Библиотека предоставляет простой и интуитивно понятный API для обработки отправки форм, проверки и многого другого.

В этом руководстве мы рассмотрим этапы создания и использования хука формы с библиотекой Createform. Мы также расскажем, как проверять поля формы с помощью библиотеки Yup и как отображать пользователю ошибки проверки.

Свяжитесь со мной в Твиттере https://twitter.com/juciano_barbosa

Монтаж

Чтобы установить Createform в свой проект, используйте npm или yarn:

npm install @createform/react

//or

yarn add @createform/react

Репозиторий: взгляните на [репозиторий GitHub](https://github.com/jucian0/createform)

Первым шагом в использовании Createform является создание хука формы. Это можно сделать, вызвав функцию createForm и передав объект со свойством initialValues. Свойство initialValues должно содержать объект с ключами и начальными значениями полей вашей формы.

Например, следующий код создает хук useLoginForm с полями электронной почты и пароля:

const useLoginForm = createForm({
  initialValues: {
    email: '',
    password: '',
  },
});

Да, этот подход похож на zustand.

Использование хука формы в компоненте формы

После того, как вы создали хук формы, вы можете использовать его в своем компоненте формы. Хук предоставляет несколько функций, которые вы можете использовать для управления формой, включая handleSubmit, register, touched и error.

Функция регистрации должна использоваться для регистрации полей формы в форме. Он принимает имя поля в качестве аргумента и должен передаваться как реквизит ref элемента поля формы.

Например, следующий код создает форму входа, которая использует хук useLoginForm:

const LoginForm = () => {
  const { handleSubmit, register } = useLoginForm();

  function onSubmit(values) {
    console.log(values);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="email" {...register('email')} />
      <input type="password" {...register('password')} />
      <button type="submit">Submit</button>
    </form>
  );
};

Когда форма будет отправлена, будет вызвана функция onSubmit с объектом, содержащим значения полей электронной почты и пароля.

Проверка полей формы

Вы также можете использовать validationSchema для проверки значений полей формы перед отправкой формы.

const validationSchema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(6).required(),
});

const useLoginForm = createForm({
  initialValues: {
    email: '',
    password: '',
  },
  validationSchema,
});

В этом примере мы используем библиотеку Yup для создания схемы проверки и передачи ее в функцию createForm. Он проверит поле электронной почты в соответствии с требованиями и с форматом электронной почты и полем пароля в соответствии с требованиями с минимум 6 символами.

В компоненте формы:

const LoginForm = () => {
  const { handleSubmit, register, errors, touched } = useLoginForm();

  function onSubmit(values) {
    console.log(values);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="email" {...register('email')} />
      {touched.email && <p>{errors.email}</p>}
      <input type="password" {...register('password')} />
      {touched.password && <p>{errors.password}</p>}
      <button type="submit">Submit</button>
    </form>
  );
};

Вы также можете использовать Zod вместо Yup.

Заключение

В библиотеке Createform есть много других ресурсов, и вы можете найти их в документации, также библиотека предоставляет простой и интуитивно понятный способ создания и управления формами в React. Он позволяет легко регистрировать поля форм, обрабатывать отправку форм и проверять значения полей форм. Используя функцию validationSchema и такие библиотеки, как Yup или Zod, вы можете легко реализовать проверку своих форм и отображать ошибки для пользователя. С библиотекой Createform создание и управление формами в React становится проще простого. Вы также можете настроить форму, добавив дополнительные поля формы или настраиваемую логику проверки.

Конечная библиотека форм для реагирования, которая вам когда-либо понадобится