Zenn
🐬

ReactUIコンポーネント Mantineはいいぞ

2022/10/02に公開
Next.js
React
mantine
tech

Mantineとは

ReactUIコンポーネントライブラリと聞くとChakra UI、MUIあたりが有名でしょうか。Tailwind使ってる人も多いと思います。

ここでは最近人気のMantineを紹介したいと思います。

https://mantine.dev/

Mantineはrtivital氏がメインとなって開発しているReactコンポーネントライブラリで、Githubのスターは約15,000あります。

スペックとしては

  • TypeScriptベース(逆にいうとtsxじゃないと動かない)
  • 豊富なコンポーネントとhook
  • ダークモード対応
  • Next.jsに公式対応

メリット

コンポーネントとhookが豊富

TOPページにもありますが、すでに100 120種類以上のコンポーネントが実装されており、なおかつアップデートで増えつつあります。（記事書いた翌日に公式が更新してました！

他のReactコンポーネントライブラリと比較すると後発ですが、負けず劣らずの量と質があります。

テキストボックスやGridなど基本的なコンポーネントからDropzoneやDatePicker/DateRangePicker、通知、モーダルウィンドウ、Prismによるシンタックスハイライトまであります。

「とはいえ、こういうコンポーネントライブラリってボタンとかはすぐに実装できるけどいざ本番相当のレイアウト組もうとすると挫折するんだよね」 って人向けに公式レイアウトサンプル集もあります。

例を上げると、ナビゲーションバーや記事カードなどです。

ドキュメントが見やすい

結構Mantineのメリットで大きいと思っていて、例えばButtonコンポーネントの公式ドキュメントなんですが、

ドキュメント上でポチポチ操作しているだけで仕様をつかめたりソースコードが生成できます。

Spotlight検索ができるのでMacの場合Cmd+Kで素早く探したいページにアクセスできます。

emotionベース

Reactコンポーネントで楽に実装出来ると言っても実際にはCSSで個別にカスタマイズしたいケースはあると思います。

Mantineはemotionベースで作られているので、ちょっとCSSを変更したい際は

import { Text } from '@mantine/core';

function Demo() {
  return (
    <Text sx={{ color: '#00ECE5', fontSize: 18, lineHeight: 1.4 }}>Text with custom styles</Text>
  );
}

と書けます。また全体に変更を加えたい場合はMantineProviderでテーマ変更も可能です。

デメリット

日本語の記事が少ない

これがデメリットとして１番大きいです。GitHubのスター数は15,000あるのでめちゃくちゃマイナーってことは無いと思ってるのですが、残念ながら国内での認知度はこれからって感じがします。

ただ、公式ドキュメントが見やすいので大抵なんとかなるのと、GitHubのDiscussionsで質問すると拙い英語でも答えてくれます。なんなら作者自身から返答くれることのほうが多いです。公式Discordサーバーでも質問できます。感謝🙏🙏🙏🙏

コンポーネントを一覧で見れない

公式ドキュメントの敷いて言えばMoreポイントとして、使っていくうちにあとから「あ、こんな便利なコンポーネントあったんだ」と気付かされるパターンがあります。

せっかくあるからには使ったほうがいいのですが既に120種類以上コンポーネントがあるので先に全部見るのも難しいです。

ということで Mantineのコンポーネント一覧サイト を開発しました。（宣伝

https://thr3a.github.io/mantine-cheatsheets/

ソースコードはこちら

https://github.com/thr3a/mantine-cheatsheets

CIで１日１回Mantineのパッケージを自動更新しつつコード生成も自動で行っているので、最新のコンポーネントも自動で更新されます。

まとめ

Mantineはいいぞ ぜひzennでも記事が増えてくれることを願ってます

Discussion