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