React Hook Form

Для начала работы с React Hook Form в проекте с Chakra UI необходимо установить пакет react-hook-form:

npm install react-hook-form

или

yarn add react-hook-form

Далее подключается Chakra UI, если он ещё не установлен:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

После установки можно интегрировать React Hook Form с компонентами Chakra UI. Основная задача — связать формы Chakra с управлением состояния через хуки useForm.

import { useForm } from "react-hook-form";
import { Input, Button, FormControl, FormLabel, FormErrorMessage } from "@chakra-ui/react";

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSub mit = data => console.log(data);

  return (
    

      
        Имя
        
        {errors.name && errors.name.message}
      
      
      
    

  );
}

Ключевые моменты:

  • register связывает компоненты Chakra UI с React Hook Form.
  • formState.errors содержит все ошибки валидации.
  • FormControl и FormErrorMessage помогают отображать ошибки стильно в Chakra.

Валидация и кастомные правила

React Hook Form позволяет использовать встроенные правила валидации или создавать кастомные функции. Chakra UI предоставляет удобный способ отображать ошибки с FormErrorMessage.


{errors.email && errors.email.message}

Можно также создавать сложные условия:

 /[A-Z]/.test(value) || "Должна быть хотя бы одна заглавная буква"
  })}
/>

Особенности:

  • pattern — регулярные выражения для проверки формата.
  • minLength и maxLength — проверка длины.
  • validate — произвольная функция, возвращающая true или сообщение об ошибке.

Управление состоянием и динамические формы

React Hook Form отлично справляется с динамическими формами. Chakra UI помогает визуально структурировать сложные формы.

import { useFieldArray, useForm } from "react-hook-form";
import { Input, Button, VStack } from "@chakra-ui/react";

function DynamicForm() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: { friends: [{ name: "" }] }
  });
  const { fields, append, remove } = useFieldArray({ control, name: "friends" });

  const onSub mit = data => console.log(data);

  return (
    

      
        {fields.map((field, index) => (
          
            
            
          
        ))}
        
        
      
    

  );
}

Преимущества:

  • useFieldArray позволяет легко добавлять и удалять поля.
  • defaultValues задаёт начальные значения для сложных структур данных.
  • Chakra VStack упрощает вертикальное выравнивание элементов.

Контролируемые и неконтролируемые компоненты

React Hook Form по умолчанию работает с неконтролируемыми компонентами. Для компонентов, которые требуют контролируемого состояния (например, Switch или Select в Chakra), используется Controller.

import { Controller, useForm } from "react-hook-form";
import { Sel ect } fr om "@chakra-ui/react";

function ControlledForm() {
  const { control, handleSubmit } = useForm();
  const onSub mit = data => console.log(data);

  return (
    

       (
          
            
            {fieldState.error && fieldState.error.message}
          
        )}
      />
      
    
  );
}

Особенности Controller:

  • Используется для компонентов с внутренним состоянием.
  • Позволяет управлять value и onChange через render-функцию.
  • Совместим с любой компонентной библиотекой, включая Chakra.

Стилизация ошибок и кастомные компоненты

Chakra UI позволяет создавать собственные компоненты формы с полной поддержкой React Hook Form.

function CustomInput({ label, name, register, errors, rules }) {
  return (
    
      {label}
      
      {errors[name]?.message}
    
  );
}

Применение:

Это повышает повторное использование компонентов и упрощает поддержку больших форм.

Асинхронная валидация

React Hook Form поддерживает асинхронные проверки, например, проверку уникальности email через API:

 {
      const res = await fetch(`/api/check-email?email=${value}`);
      const isAvailable = await res.json();
      return isAvailable || "Email уже занят";
    }
  })}
/>
{errors.email?.message}

Особенности:

  • Валидация может быть промисом.
  • React Hook Form корректно обрабатывает асинхронные ошибки.

Интеграция с Chakra UI Form Components

Chakra UI предоставляет набор компонентов (Input, Textarea, Switch, Checkbox, Select) полностью совместимых с React Hook Form через register или Controller. Это позволяет строить формы любого уровня сложности с единым стилем, красивыми ошибками и управлением состояния без лишнего кода.

Оглавление