実務で Mantine UI を使用した所感

株式会社ゆめみの 23 卒 Advent Calendar 2023の6日目の内容です。

実務で 0→1 開発をする機会があり、予算が少ない && 開発期間が短い(半年?)という背景もあり開発速度を意識した技術選定をする必要がありました。

開発段階では v6 系が最新だったので、主に v6 系での所感について触れていきます。
所々 v7 系で補足を入れていきます。

TL;DR

• スタイリングが容易なUIコンポーネントライブラリ！
• コンポーネントのバリエーションが豊富で困らなかった！
• mantine/{hooks, packages}の使い勝手が良かった！
• v7 系は Emotion が取り除かれたので使い勝手がわからない！
  • でも、theme のツラみはある程度解消されてそうだった！

Mantine UI とは

Mantine is a React components library focused on providing great user and developer experience

React で使用出来るコンポーネントライブラリです。
コンポーネントだけでは無く、オリジナルのカスタム hooks ライブラリや form ライブラリなども提供しています。

各ブラウザのサポート状況

• Chromium browsers 108+ – Chrome, Edge, Chrome for Android, etc.
• Firefox 101+
• Safari 15.4+
• IE (any version) is not supported

https://mantine.dev/about/

https://mantine.dev/

良かったところ

• Emotion が内蔵されているのでネストされたスタイリングなども容易に出来た。(v6 のみ)
• デザインのベースを Mantine UI のコンポーネントにして頂いてたので、最大限使うことができて実装のコストが減った
• レスポンシブ対応がシンプル
• スケルトンローディングの実装が簡単
• mantine/{hooks, packages} で痒い所に手が届く

Emotion が内蔵されているのでネストされたスタイリングなども容易に出来た。(v6 のみ)

v6 系では内部的に Emotion を使用していることから inline で柔軟にスタイリング出来ました。

// cite: https://mantine.dev/guides/6x-to-7x/#sx-prop
function Demo() {
  return <Box sx={{ "&:hover": { background: "red" } }} />;
}

v7 系では app router 対応のため、Emotion が取り除かれたので sx props は使用出来なくなっています。
その代わり独自の style props や className を推奨しています。
cite: https://mantine.dev/styles/style/

デザインのベースを Mantine UI コンポーネントにして頂いてたので、最大限使うことができて実装のコストが減った

タイトルの通りですね。
共通で使われる Atom / Molecules レベルの UI コンポーネントを極力実装しないことで、開発速度が上がりました。
Mantine UI の Theme 機能でコンポーネントごとの defaultProps や variants を定義することが出来たお陰もあり、効率良く開発出来ました。

下記は v6 のコードなのでもしかしたら指定方法などが変わっているかもしれません…!!

コンポーネントごとの Theme 設定

const components: MantineThemeOverride["components"] = {
  Text: {
    defaultProps: {
      variant: "body-medium",
    } as Partial<TextProps>,
    variants: typographyVariants,
  },
  // MEMO: Skeleton Component では読み上げをスキップする
  Skeleton: {
    defaultProps: {
      "aria-hidden": true,
    },
  },
};

Typography に関する Variants の Theme 設定

export const typographyVariants: MantineThemeComponents["Text"]["variants"] = {
  "heading-medium": (theme) => ({
    root: {
      fontSize: 20,
      [theme.fn.largerThan("lg")]: {
        fontSize: 24,
      },
    },
  }),
  "body-medium": (theme) => ({
    root: {
      fontSize: 16,
      [theme.fn.largerThan("lg")]: {
        fontSize: 18,
      },
    },
  }),
};

コンポーネントで Typography を変更する

<Text variant="heading-medium">Lorem Ipsum</Text>

レスポンシブ対応がシンプル

プロパティにもよりますが、オブジェクト形式で値を渡すことでブレイクポイントごとに値を切り替えてくれます。

// cite: https://mantine.dev/core/flex/
function Demo() {
  return (
    <Flex
      direction={{ base: "column", sm: "row" }}
      gap={{ base: "sm", sm: "lg" }}
      justify={{ sm: "center" }}
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Flex>
  );
}

スケルトンローディングの実装が簡単

通常の場合スケルトンローディングを実装するとなると、レイアウトや行間などを意識して、どの程度シンプルにするかなど考慮すべき事項が多いと思います。
今回は Mantine UI の Skeleton コンポーネントを使用し工数をかけずに実装出来ました。

<Stack gap="lg">
  <Skeleton>
    <複雑コンポーネントA />
  </Skeleton>
  <Skeleton>
    <複雑コンポーネントB />
  </Skeleton>
</Stack>

https://mantine.dev/core/skeleton/

mantine/{hooks, packages} で痒い所に手が届く

クリップボードを使いたい！ → import { useClipboard } from "@mantine/hooks";
Intersection Observer を使いたい！ → import { useIntersection } from '@mantine/hooks';
ユーザーにトーストを表示したい！ → import { notifications } from "@mantine/notifications";
カルーセルを表示したい！ → import { Carousel } from '@mantine/carousel';

https://mantine.dev/hooks/use-intersection/
https://mantine.dev/hooks/use-clipboard/
https://mantine.dev/others/notifications/
https://mantine.dev/others/carousel/

苦労したところ

• Theme の Variants を設定しても補完が効かない
• Theme の colors を設定するためには 10 段階の深みのある色を用意する必要がある

Theme の Variants を設定しても補完が効かない

Text コンポーネントには Typography に関する Variants を設定しているにもかかわらず標準で容易されている variant だけが補完されます。

Theme の colors を設定するためには 10 段階の深みのある色を用意する必要がある

brand を 1 色設定したいだけなのにたくさん定義する必要がありました。

// cite: https://v6.mantine.dev/theming/colors/#primary-color
colors: {
  brand: ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
},

その為 theme.other に colors を定義し、型定義ファイルを作成し使用していました。

v7 のドキュメントには 1 色から 10 段階の深みの色を自動で生成してくれるジェネレーターや関数が増えていました！

https://mantine.dev/colors-generator/
https://mantine.dev/theming/colors/#colors-generation

まとめ

• スタイリングが容易なUIコンポーネントライブラリ！
• コンポーネントのバリエーションが豊富で困らなかった！
• mantine/{hooks, packages}の使い勝手が良かった！
• v7 系は Emotion が取り除かれたので使い勝手がわからない！
  • でも、theme のツラみはある程度解消されてそうだった！

感想

今までコンポーネントライブラリとして MUI や Chakra UI を使用してきましたが、Mantine UI を触ることが出来て良かったです。
機会があれば比較の記事を書きたいと思っています。
( shadcn/ui も気になっているので使ってからかな…）