Chakra UIについて

エンジニアの信尾海翔です。
第十四回目のブログではChakra UIについて簡単に紹介できればと思います。

Chakra UIとは

Chakra UIはUIコンポーネントライブラリです。
テーマの設定やコンポーネントを再利用することでデザインに統一性を持たせることができます。
またカラーモードやModal、Tooltipなどが便利なアイテムが初めから用意されています。

実際にchakra Uiを使ってみる

react-create-appでプロジェクトを作成、templateでchakra-uiを指定

npx create-react-app sample —template @chakra-ui

今回は以下の機能を持ったButtonを実装したいと思います。
・マウスカーソルを合わせるとTooltipが表示
・Buttonを押すとToastが表示

create-react-appで作成したsample内のApp.jsを以下のコードに変更


import React from 'react';
import {
  ChakraProvider,
  theme,
  Flex,
  Tooltip,
  Button,
  useToast,
} from '@chakra-ui/react';

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

  return (
    <ChakraProvider theme={theme}>
      <Flex
        justifyContent='center'
        alignItems='center'
        minH="100vh"
      >
        <Tooltip
            placement='top'
            label='ボタンを押すとToastを表示します'
        >
          <Button
            colorScheme='green'
            onClick={()=> {
              toast({
                'title': 'Toastです',
                'description': '3秒間表示されます',
                'status': 'success',
                'duration': '3000',
                'isClosable': true,
              })
            }}
          >hover</Button>
        </Tooltip>
      </Flex>
    </ChakraProvider>
  );
}

export default App;

コード内容について


<Flex
  justifyContent='center'
  alignItems='center'
  minH="100vh"
>
...
</Flex>

Flexはdiv要素にdisplay :flexを付属させたものと同じ効果を持ちます。


<Tooltip
    placement='top'
    label='ボタンを押すとToastを表示します'
>
...
</Tooltip>

Tooltipは囲んだ要素がhover状態になるとlabelで渡した文字列がTooltipで表示されます。
またplacementでTooltipが表示される位置を指定しています、今回はtopを指定したため、ボタン上に表示されます。


<Button
  colorScheme='green'
  onClick={()=> {
    toast({
      'title': 'Toastです',
      'description': '3秒間表示されます',
      'status': 'success',
      'duration': '3000',
      'isClosable': true,
    })
  }}
>hover</Button>

ButtonはChakra UIが用意したコンポーネントを使用しています。
colorSchmeには配色として緑を指定しています。


toast({
  'title': 'Toastです',
  'description': '3秒間表示されます',
  'status': 'success',
  'duration': '3000',
  'isClosable': true,
})

titleにはタイトルとして表示したい文字列、descriptionにはタイトル下に説明して表示したい文字列を指定しています。
statusにはerror、success、info…などステータスを指定します、今回はsuccessを指定しため、緑色で表示されます。
durationには表示したい秒数、今回は3秒を指定しています。
isclosableはToast内にToastを非表示にするボタンを表示することができます。

Buttonがhover状態になるとTooltipが表示

Buttonを押すとToastが表示

余談

Chakra UIは簡単にデザインに統一性を持たせることができるのでよくお世話になっています。
Electronで音楽プレーヤーアプリを作った際もChakra UIでダークモードなどを実装しました。
Chakra UIの公式ドキュメントには少年ジャンプのナルトのキャラクター画像などが使われているのですが、Chakra UIのchakraはナルトのチャクラなのか気になっています…