こんにちは。
Web系自社開発企業に勤務しているフロントエンドエンジニアです。
つい最近、勤めている会社で新規開発が始まり、
UIライブラリとして「Mantine」を導入することにしたので、
開発を通して感じたことを共有しようと思います。
はじめに
まずMantineとはどういったものなのか。
簡単にいうと、開発において多くの場合に必要になるであろうコンポーネントを提供してくれ、
さらに便利なHooksも提供してくれるUIライブラリです。
公式Docsに載っているコンポーネントを見てみると、
管理画面を作る場合、特に相性がいいなと感じます。
なぜMantineなのか
じゃあMUIなど他のUIライブラリではなく、
なぜMantineにしたのか。
自分が感じたメリットとしては以下です。
- Tailwind CSSと相性がよく、細かくスタイリングをしやすい。
- フックスがめっちゃ優秀
- これもあるのかというほどコンポーネントが豊富
上記のメリットに関して詳しく話していこうと思います。
Tailwind CSSと相性がよく、細かくスタイリングをしやすい。
UIライブラリといえばMUIやCahkraUIですよね。
自分も今までは、UIライブラリと聞けば主にこの２つがパッと思い浮かんでいました。
これらに対して前々から、めちゃめちゃスタイリングしにくくね？と思っていました。
さらにTailwindCSSのようなclassNameベースのCSSライブラリとの親和性の低さに悩んでいました。
そんな時に出会ったのが、Mantineです。
では早速、なぜMantineがTailwindCSSと相性が良いと思うのか説明していきます。
1番の理由としては、
MantineのStylesAPIで以下のように、部品の詳細にclassNameでスタイルを当てれます。
これが大きすぎるメリットだと感じました。
今までは公式Docsとにらめっこしながらしていたスタイリングもこんな簡単にできます。
コード上では、以下のようにスタイリングできます。
<Button
classNames={{
root: "ml-2 bg-blue-600",
label: "text-gray-300",
}}
>
ボタン
</Button>
これはボタンだけではなく、ほとんどのコンポーネントで可能です！
そして上記のボタンの例を見ていただけるとわかるのですが、
classNameで指定できるということから、TailwindCSSをすごく簡単に使用できるんです！
フックスがめっちゃ優秀
もう１つMantineの大きな特徴としては、
提供しているフックスが充実していることだと思っています。
いくつかよく使っているフックスを紹介します。
まずはuseDisclosureです。
これはモーダルの開閉や、開けた時に処理を行いたいなど、そういった場合に使いたいフックスです。
次はuseClickOutsideです。
これはその名の通り、指定した要素の外側をクリックした時に何か処理を行いたい場合に便利です。
ドロップダウンメニューなどによく使います。
他にもuseMediaQueryやuseIntersectionなど、
多くのフックスが提供されているので一度目を通すだけでも見てみてください。
またuseFormも提供しており、使いやすいのでおすすめです。
これもあるのかというほどコンポーネントが豊富
Mantineはほんとに多くのコンポーネントを提供してくれています。
例えばボタンやインプットフィールド、モーダルにアコーディオンなど、、。
加えてDropzoneやDatePicker/DateRangePickerなども提供してくれています。
上記のようなよく使う便利なコンポーネントから、
これってあんま使わないよな、って思うものもあったりします。
しかしどれも使い勝手が良いものだと思うので、
ぜひ試しに公式Docsを見てみてください！
最後に
自分はMantineを使ってみて、
すごく使いやすいなと感じました。
今まではUIライブラリを使うとスタイリングが大変ということもあり、
メンテナス性を担保するコストと開発の初期コストが見合わないと判断し、
TailwindCSSと自作のコンポーネントを自分で実装していました。
しかしヘッドレスなUIライブラリの中で、
提供しているコンポーネントなどがとても優秀なMantineを見つけてから、
開発効率を爆上げできるメリットが大きいと考えました。
そして実際に導入して、
その判断に間違いなかったと実感しています。
皆さんもぜひMantineを試しに使ってみてください！
参考にした記事