Mantineの推しUIコンポーネント5選 #React

Mantineとは

豊富なコンポーネント + Hooksを提供してくれる強力なReact UI Component ライブラリで、
綺麗で、統一感のあるデザインが作れるという特徴があります。

似たようなライブラリとしてChakra UI や MUIといったサービスが挙げられます。
Chakra UI や MUIはなじみのある方が多いのではないでしょうか。

今回は社内でも導入したMantineの便利なUIコンポーネントを厳選してお伝えできればと思います。
(Chakra UI や MUIとの比較にもお役立ていただければと・・)

1つ目はCopyButton
🍀【推しポイント】とにかく実装が簡単

簡単にコピーボタンができるというのが特徴。
よくあるのが、左側にコピー対象のテキストがあって右側にコピーボタンを配置されている構図。

こんな感じで配置できます。
もちろん、hooksなどを使ってコピー対象を指定する必要がありますが、かなり便利。

HTMLとJavascriptを組み合わせて作るのが面倒な方におすすめです。

2つ目はModal
🍀【推しポイント】モーダルを開いたときの動きが好き

Modalコンポーネントにモーダル用のコンポーネントをラップする。
後はシンプルに、hooks等を使ってモーダルの開閉をおこなうロジックを入れるだけです。
個人的にはモーダルを開いたとき、閉じたときのすんなりと動く感じがお気に入りです！（伝われ）

sample.tsx

    <Modal opened={opened} onClose={close} title="Authentication" centered>
        {/* Modal content */}
      </Modal>

3つ目はPinInput
🍀【推しポイント】タブキー、エンターキー要らずの使用感

PinInputはPINコード入力を実装時に役立つコンポーネントです。
タブキーやエンターキーを利用者に押させずとも入力させることができるのが良いですね。

あとは、Propsも多く取り揃えており、自由度も比較的高いコンポーネントなのではと思っております。

sample.tsx

 <Group>
   <PinInput />
 </Group>

4つ目はNotification
🍀【推しポイント】とても素晴らしい

画面の左上や右上あたりによく見かける（？）「ほぞんしました」みたいなあれです。
実装コストが低く、色んなパターンに対応できるのが良いですね。
また、色味やアイコンも自由に変更可能なので、カスタマイズして配置するのがおすすめです。

5つ目はRating
🍀【推しポイント】UIが一番のお気に入り

はじめてみたときに思わず「すんげー」と。
これが一行のコードで簡単に実装できるのは控えめに言ってやばいですね。
MUIでも同様のコンポーネントが存在するのですが、見た目、触ってみる感じMantineの方が好きです。

sample.tsx

<Rating defaultValue={3} />

MantineはこのほかにもたくさんのUIコンポーネントが存在し、全部紹介しきれないので5選とさせていただきました。
また今度、Mantine FormやMantine Hooksとかの紹介もしていければと思います。

では🤞