Chapter 02無料公開

1章 基礎編

terrierscript
terrierscript
2021.05.12に更新

まずChakra UIに馴染みのない方向けに、導入の基礎を紹介します。

Chakra UIの特徴

Chakra UIは「Component Library」との自称ではありつつ
分解すると下記のような特徴を持っていると言えるでしょう。

1.スタイルのついたコンポーネント集としての機能

Button, Inputなどクオリティの十分高いコンポーネントが揃っているため、プロトタイピングするのに非常に役立ちます。
(筆者はデザインプロトタイピングの段階でChakra UIを使うこともあります)

2.複雑な機能を解決するコンポーネント集としての機能

ModalやPopover、Tabなど素で実装するとかなり手間のかかるコンポーネントが一通り揃っています。
hooksとしてもuseClipboarduseOutsideClickなども提供されています。

3. CSS in JSライブラリとしての機能

他のコンポーネントライブラリと一番違いがあるのはこの部分でしょう。
styled-systemをベースにしたスタイリングを内包しているため、他のCSS in JSライブラリ無くほとんどのstyleを再現可能です。

<Box p={10} bg={"red.100"} letterSpacing="1.5em">Hello</Box>