useDisclosure

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

Основные возможности

Хук возвращает объект с ключевыми свойствами и методами:

const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

isOpen — логическое значение (true или false), отражающее текущее состояние компонента: открыт или закрыт.
onOpen — функция для открытия компонента. При вызове isOpen становится true.
onClose — функция для закрытия компонента. При вызове isOpen становится false.
onToggle — функция переключения состояния. Если компонент был закрыт — откроется, если открыт — закроется.

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

Пример использования с модальным окном

import { Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, useDisclosure } from "@chakra-ui/react";

function ModalExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onCl ick={onOpen}>Открыть модальное окно</Button>

      <Modal isOpen={isOpen} onCl ose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Заголовок модального окна</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            Содержимое модального окна
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}

В этом примере useDisclosure управляет состоянием модального окна. При клике на кнопку вызывается onOpen, что делает модальное окно видимым. Кнопка закрытия вызывает onClose, скрывая окно.

Использование с аккордеонами

Хук полезен не только для модальных окон. Его удобно применять для управления состоянием открытых секций аккордеона:

import { Box, Button, Collapse, useDisclosure } from "@chakra-ui/react";

function AccordionExample() {
  const { isOpen, onToggle } = useDisclosure();

  return (
    <>
      <Button onCl ick={onToggle}>
        {isOpen ? "Скрыть детали" : "Показать детали"}
      </Button>
      <Collapse in={isOpen}>
        <Box p="4" mt="2" bg="gray.100">
          Подробная информация
        </Box>
      </Collapse>
    </>
  );
}

onToggle позволяет переключать состояние видимости блока с анимацией, используя встроенный компонент Collapse.

Интеграция с компонентами навигации

useDisclosure активно используется для управления боковыми панелями (Drawer) и всплывающими меню (Menu). Это позволяет синхронизировать состояние видимости с событиями пользователя и создавать сложные интерфейсы без лишней логики состояния.

Пример с боковой панелью:

import { Button, Drawer, DrawerBody, DrawerHeader, DrawerOverlay, DrawerContent, useDisclosure } from "@chakra-ui/react";

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onCl ick={onOpen}>Открыть панель</Button>

      <Drawer isOpen={isOpen} placement="right" onCl ose={onClose}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>Навигация</DrawerHeader>
          <DrawerBody>
            Содержимое боковой панели
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
}

Дополнительные возможности

defaultIsOpen — позволяет задать начальное состояние компонента.
```
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
```
В этом случае компонент будет открыт сразу при рендере.
Полная интеграция с TypeScript:
```
const { isOpen, onOpen, onClose }: { isOpen: boolean; onOpen: () => void; onClose: () => void } = useDisclosure();
```
Хук типизирован, что обеспечивает строгую проверку при разработке.
Может использоваться совместно с эффектами:
```
useEffect(() => {
  if (someCondition) {
    onOpen();
  }
}, [someCondition]);
```