【ChakraUI】useDisclosureを使って開閉を管理しよう

こんにちは！
スペースマーケットでフロントエンドエンジニアをしているwharaguchiです。

先日Chakra UIのuseDisclosureという便利なカスタムフックを知ったので、今回はそちらの紹介記事になります。

Chakra UIのuseDisclosureとは

useDisclosureは、Chakra UIが提供しているオープンやクローズの状態を管理するカスタムフックです。
自前でuseStateなどを用意しなくても、useDisclosureを使うことで開閉管理を行うことができます。

V3のuseDisclosureからは、以下の値が返ってきます。

値	型	説明
open	boolean	現在の開閉状態を表す値
onOpen	function	openをtrueに設定する関数
onClose	function	openをfalseに設定する関数
onToggle	function	openのtrue/falseを切り替える関数

サンプルコードを以下に用意しました。

サンプルコード

このサンプルコードでは、開く、閉じる、開閉という3つのボタンを用意し、それぞれのボタンに上述した各functionを設定しています。

openの値によって、コンテンツの表示が切り替わります。

import { Provider } from "@/components/ui/provider";
import { Button, Heading, chakra, useDisclosure } from "@chakra-ui/react";

export default function Home() {
  const { onOpen, onClose, open, onToggle } = useDisclosure();
  return (
    <Provider>
      <chakra.div maxW="1100px" margin="auto" px="16px" py="32px">
        <Heading as="h1" size="2xl" textAlign="center">
          useDisclosure
        </Heading>
        <chakra.div display="flex" gap="16px" mt="16px" justifyContent="center">
          <Button
            colorPalette="blue"
            onClick={onOpen}
            fontWeight="bold"
            px="16px"
          >
            開く
          </Button>
          <Button
            colorPalette="gray"
            onClick={onClose}
            fontWeight="bold"
            px="16px"
          >
            閉じる
          </Button>
          <Button
            colorPalette="cyan"
            onClick={onToggle}
            fontWeight="bold"
            px="16px"
          >
            開閉
          </Button>
        </chakra.div>
        <chakra.div
          width="600px"
          mt="16px"
          mx="auto"
          display={open ? "block" : "none"}
          border="1px solid"
          borderColor="white"
          p="16px"
        >
          コンテンツ
        </chakra.div>
      </chakra.div>
    </Provider>
  );
}

（余談）V2からV3への変更点

余談ではありますが、V2からV3になり、useDisclosureから返ってくる値が変更されました。

use-disclosure.d.ts

// V3.2.2
export declare function useDisclosure(props?: UseDisclosureProps): {
    open: boolean;
    onOpen: () => void;
    onClose: () => void;
    onToggle: () => void;
};

use-disclosure.d.ts

// V2.8.2
declare function useDisclosure(props?: UseDisclosureProps): {
    isOpen: boolean;
    onOpen: () => void;
    onClose: () => void;
    onToggle: () => void;
    isControlled: boolean;
    getButtonProps: (props?: any) => any;
    getDisclosureProps: (props?: any) => any;
};

https://v2.chakra-ui.com/docs/hooks/use-disclosure
※上記のドキュメントはV2のものになります。
（V3のuseDisclosureのドキュメントについては見つけられずでした。）

自分は初めてuseDisclosureを使用したときはV2を使用していたのですが、この記事を書くにあたり用意したサンプルコードはV3だったため、少し迷ってしまいました。

さいごに

いかがだったでしょうか？
自前でuseStateを作らなくてもよくなりますし、作りがシンプルなため直感的に使用することができて、個人的には便利なカスタムフックだと感じています。
機会があればぜひ使ってみてください🥳

最後に宣伝です！
スペースマーケットでは現在エンジニアを募集しております！
ちょっと話を聞いてみたいといったようなカジュアルな面談でも構いませんので、ご興味のある方は是非ご応募お待ちしております！