Создание кастомных хуков

В Chakra UI кастомные хуки позволяют инкапсулировать повторяющуюся логику компонентов, упрощая управление состоянием, темами и поведением элементов интерфейса. Они строятся поверх React Hooks, таких как useState, useEffect, useContext, и расширяют возможности стандартных компонентов Chakra UI.

Кастомные хуки особенно полезны для:

  • Повторного использования логики управления состоянием UI
  • Создания абстракций для сложных взаимодействий с компонентами
  • Интеграции с системами тем и цветов Chakra UI

Пример базового кастомного хука для управления модальным окном:

import { useDisclosure } from "@chakra-ui/react";

function useModal() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  
  const toggle = () => (isOpen ? onClose() : onOpen());

  return { isOpen, onOpen, onClose, toggle };
}

export default useModal;

Здесь useDisclosure — встроенный хук Chakra UI для управления видимостью компонентов, таких как Modal или Drawer. Кастомный хук useModal добавляет метод toggle, который делает использование модального окна более удобным.

Работа с темами через кастомные хуки

Chakra UI предоставляет useTheme для доступа к теме приложения. Кастомные хуки позволяют динамически менять стили компонентов или получать значения цветов и размеров:

import { useTheme } from "@chakra-ui/react";

function useColorScheme() {
  const theme = useTheme();

  const primaryColor = theme.colors.blue[500];
  const secondaryColor = theme.colors.gray[200];

  return { primaryColor, secondaryColor };
}

export default useColorScheme;

Такой хук полезен для компонентов, которым нужно адаптировать стили под текущую тему, не повторяя код в каждом компоненте.

Кастомные хуки для управления формами

Chakra UI часто используется вместе с формами. Кастомные хуки упрощают работу с состоянием формы и валидацией:

import { useState } from "react";

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  const resetForm = () => setValues(initialValues);

  return { values, handleChange, resetForm };
}

export default useForm;

Применение такого хука совместно с компонентами Chakra UI (Input, Select, Checkbox) позволяет минимизировать дублирование логики и сделать формы более читаемыми и управляемыми.

Создание хуков для управления уведомлениями и Toast

Chakra UI предоставляет useToast для отображения уведомлений. Кастомный хук может инкапсулировать стандартные параметры уведомлений, обеспечивая единообразие:

import { useToast } from "@chakra-ui/react";

function useNotification() {
  const toast = useToast();

  const notify = (title, status = "info", duration = 5000) => {
    toast({
      title,
      status,
      duration,
      isClosable: true,
      position: "top-right",
    });
  };

  return { notify };
}

export default useNotification;

Использование useNotification позволяет быстро создавать уведомления с одинаковым стилем, не прописывая параметры каждый раз в компонентах.

Кастомные хуки с анимациями и переходами

Chakra UI поддерживает анимации через motion и Collapse. Кастомные хуки позволяют управлять состояниями анимаций:

import { useState } from "react";

function useCollapse(initial = false) {
  const [isOpen, setIsOpen] = useState(initial);

  const toggle = () => setIsOpen(!isOpen);
  const open = () => setIsOpen(true);
  const close = () => setIsOpen(false);

  return { isOpen, toggle, open, close };
}

export default useCollapse;

Этот подход облегчает работу с компонентами, которые скрывают или показывают содержимое с анимацией, например Collapse или кастомные аккордеоны.

Интеграция кастомных хуков с контекстом Chakra UI

Chakra UI использует контексты для управления цветами, размерами и модальными состояниями. Кастомные хуки могут оборачивать логику работы с контекстом, создавая единый API для компонентов:

import { useColorMode } from "@chakra-ui/react";

function useDarkMode() {
  const { colorMode, toggleColorMode } = useColorMode();

  const isDark = colorMode === "dark";

  return { isDark, toggleColorMode };
}

export default useDarkMode;

Такой хук позволяет компонентам автоматически адаптироваться к светлой или темной теме, обеспечивая единообразие в интерфейсе.

Лучшие практики при создании кастомных хуков

  • Инкапсуляция логики: Каждый хук должен отвечать за конкретную задачу и не смешивать несколько разных областей.
  • Повторное использование: Хуки должны быть максимально универсальными, чтобы их можно было использовать в разных компонентах.
  • Минимизация побочных эффектов: Использовать useEffect только там, где это необходимо, избегать лишних обновлений состояния.
  • Следование конвенциям Chakra UI: Для интеграции с темой и стилями использовать useTheme, useColorMode и встроенные хуки библиотеки.
  • Возврат объектов: Возвращать из хуков объекты вместо массивов, чтобы при деструктуризации не зависеть от порядка элементов.

Кастомные хуки в Chakra UI становятся мощным инструментом для структурирования кода, управления состояниями и стилизацией компонентов, упрощая создание масштабируемых и поддерживаемых приложений.

Оглавление