Chakra UI カスタムフック便利度ランキング - キカガクプラットフォームブログ

こんにちは、キカガク開発事業部ソフトウェアエンジニアの柳澤です。

キカガクではReactのUIコンポーネントフレームワーク「Chakra UI」でスタイリングを行っています。

Chakra UI にはスタイルシステムだけでなく、コンポーネントやカスタムフックが多く用意されているので、フロントエンド開発がとてもはかどります。

前回はスタイルシステム周りの小技集について触れたので、今回はカスタムフックについてご紹介します。実際に使ってみた感触と偏見をもとに、便利度ランキングを作成しました！

対象読者

Chakura UI を使って開発を行っているエンジニアの方

便利度 ★☆☆　useOutsideClick

使用頻度は低いですが、個人的に一番感動したカスタムフックです。

ref を渡したコンポーネント以外をクリックすることで、イベントを起こす事が出来ます。

コンポーネント以外の所にボタンがたくさんあると、挙動が混乱するので要注意です。

import { useOutsideClick } from '@chakra-ui/react'

const Example = () => {
  const ref = React.useRef();
  useOutsideClick({
    ref: ref,
    handler: () => console.log('エリア外です'),
  });

  return (
    <>
      <Box ref={ref}>このコンポーネント以外の場所をクリックすると、イベントがおこる</Box>
    </>
  );
};

便利度 ★☆☆　useClipboard

コードを掲載する時などにあったら嬉しい、文章のコピー機能。

useClipboard を使えば一瞬で実装することができます！

コピー出来たかどうかの状態は hasCopied から受け取れます。

import { Button, Input, useClipboard  } from '@chakra-ui/react';

const Example = () => {
  const value = 'コピーしてほしい文言';
  const { hasCopied, onCopy } = useClipboard(value);
  return (
    <>
      <Input value={value} isReadOnly/>
      <Button onClick={onCopy}>ここをクリックしてコピー！</Button>
    </>
  );
};

useClipboard

便利度 ★★☆　useMediaQuery

レスポンシブ時にコンポーネントの出し分けをしたいときに、使えるカスタムフックです。

Chakra UI でスマホ時・PC時の出し分けを実装するとき、以下のように display で出し分ける方法があります。

const Example = () => {
  return (
    <>
            <Box display={{ base: 'block', lg: 'none' }}>PC用のコンポーネント</Box>
      <Box display={{ base: 'none', lg: 'block' }}>スマホ用のコンポーネント</Box>
    </>
  );
};

これでも十分実装はできますが、useMediaQuery を使うことでもう少しスマートな書き方にすることが出来ます。ブレークポイントを chakra.config で設定している場合、そこから値を読み込むのが良いかと思います。

import { Box, useMediaQuery  } from '@chakra-ui/react';

const Example = () => {
  const breakpointXl = '1024px';
  const [isPC] = useMediaQuery(`(min-width: ${breakpointXl})`);
  return (
    <>
      {isPC ? (
        <Box>PC用のコンポーネント</Box>
      ) : (
        <Box>スマホ用のコンポーネント</Box>
      )}
    </>
  );
};

useMediaQuery

便利度 ★★★　useDisclosure

開閉を司るカスタムフック useDisclosure は、モーダル・開閉メニューなど応用場面が多くあります。個人的に一番使っているカスタムフックです！

以下、モーダル開閉の使用例を記載します。

import { Button, Modal, ModalOverlay, ModalContent, useDisclosure } from '@chakra-ui/react';

const Example = () => {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={onOpen}>モーダルを開く</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          モーダルの中身
          <Button onClick={onClose}>モーダルを閉じる</Button>
        </ModalContent>
      </Modal>
    </>
  )
}

また、以下のように任意の名前をつけてあげることで、同コンポーネント内でいくつもuseDisclosure を使うことができます。

const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
const { isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose } = useDisclosure();

useDisclosure

終わりに

コンポーネントの外側をクリックした時にイベントを起こしたい…と悩んでいた時に useOutsideClick を見つけ、ニッチな要望にも対応できるChakra UI カスタムフックの充実度に感動し、本記事を書きました。

今回ご紹介できていない機能もたくさんあるので、ぜひ公式ドキュメントをご覧ください！

自分の力でスイスイ便利カスタムフックを生み出せるのが理想ですが、まだまだ駆け出しの私にとっては、このように公式で沢山用意されているのはとても有り難いことでした。

利用できる機能はどんどん使って、気持ちよい開発ライフを送りましょう！

対象読者

便利度 ★☆☆ useOutsideClick

便利度 ★☆☆ useClipboard

便利度 ★★☆ useMediaQuery

便利度 ★★★ useDisclosure

終わりに

便利度 ★☆☆　useOutsideClick

便利度 ★☆☆　useClipboard

便利度 ★★☆　useMediaQuery

便利度 ★★★　useDisclosure