React用UIコンポーネントライブラリ「Mantine」を触ってみる

Mantine公式サイトのキャプチャ画像

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回は Mantine という React 用UIコンポーネントライブラリを触ってみたのでその特徴とコンポーネントのカスタマイズ方法についてまとめてみたいと思います。

Mantine UIとは?

Mantine UI は MUIChakra UI のような React 用UIコンポーネントライブラリの一つです。100 を超えるカスタマイズ可能なコンポーネントと 40 の hooks が用意されています。TypeScript もしっかりサポートしています。

yarn で導入することで使い始めることができます。

$ yarn add @mantine/core @mantine/hooks @emotion/react

Mantine の特徴

基本的なレイアウト用コンポーネントからトランジションを持つコンポーネントまで網羅されている

コンポーネントは Grid のようなレイアウトを扱うためのものから TextTable などの表示系、 AccordionModal Overlay のようなトランジションを持つコンポーネントまで一通り網羅されている印象です。

また、カスタムスクロールバーのある領域を実装する ScrollArea やレスポンシブで一貫した幅と高さの比率を維持する AspectRatio という少しユーティリティに近いコンポーネントも用意されており、これは他のUIライブラリには無い特徴かなと思います。

ScrollArea というカスタムスクロールバーのある領域を実装でいるコンポーネントが用意されている

Mantine Hook という hooks 集が公式で用意されている

Mantine hook という hooks 集が公式で用意されています。
この hooks が非常に便利で、個人的に Mantine を選ぶ大きい理由になるのではないかと思いました。
一例では button 要素の onClick に用意された関数を渡すことでカウンターが実装できる use-counter、メモ化されたランダム ID を生成できる use-id 等があります。
自作の実装や他ライブラリを導入せず、Maintine Hooks を使用すれば、スムーズに開発できそうです。

Mantine Form でフォーム周りを実装できる

フォームを実装するための React ライブラリは React Hook Form などがありますが、Mantine にも Mantine Form というフォーム実装用のライブラリが用意されています。これにより Mantine を導入するだけでフォームが実装できます。

スタイルシステムは emotion を採用している

Mantine は CSS in JS のフレームワークである emotion を採用しています。これにより emotion の機能をそのまま使用できます。

IEがサポートされていない

重要な点として、IEがサポートされていません。
これによりIE対応等が求められるようなプロジェクトには向いていないかもしれません。
とはいえIE11のサポートが終了した今積極的に採用していきたいところです。

スタイルの上書きについて

コンポーネントのスタイルを上書きする方法は様々なものが用意されていますが、主に以下の方法があります。

  • インラインスタイルによるスタイリング
  • createStyle によるスタイリング
  • クラス名によるスタイリング

インラインスタイルによるスタイリング

コンポーネントに sx props を渡すことによりインラインスタイルで上書きが可能です。

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

function Demo() {
  return (
    <Text
      sx={{
        '&:hover': {
          backgroundColor: '#eee',
        },

        '@media (max-width: 755px)': {
          fontSize: 14,
        },
      }}
    >
      My custom text
    </Text>
  );
}

emotion のスタイルシステムを使用しているため、内部的にはランダムなクラス名が生成されて付与される形になります。

Text コンポーネントにランダムなクラス名が生成されて付与されている

createStyle によるスタイリング

createStyle という関数を使ってクラス名を生成しスタイルを適用できます。
MUIを触ったことがある方は makeStyles と記法が似ているため直感的に扱えると思います。

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

const useStyles = createStyles({
  parent: {
    backgroundColor: 'pink',

    '&:hover': {
      backgroundColor: 'orange',
    },
  },

  child: {
    fontSize: 14,
    lineHeight: 1.45,
  },

  active: {
    backgroundColor: 'white',
  },
});

function Demo() {
  const { classes, cx } = useStyles();
  return (
    <div className={classes.parent}>
      <div className={classes.child}>Child</div>
      <div className={cx(classes.child, classes.active)}>Active child</div>
    </div>
  );
}
要素にランダムなクラス名が生成されて付与されている

クラス名によるスタイリング

個別の要素に付与されたクラス名に対応する形でクラス名を渡して、要素ごとにスタイリングできます。これは createStyles で生成したクラス名も適用できますし、Tailwind CSS のようなCSSフレームワークのクラス名を指定できます。

import { Slider, createStyles } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  track: {
    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1],
  },
  mark: {
    width: 6,
    height: 6,
    borderRadius: 6,
    transform: 'translateX(-3px) translateY(-2px)',
    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1],
  },
  markFilled: {
    borderColor: theme.colors.blue[6],
  },
  markLabel: { fontSize: theme.fontSizes.xs, marginBottom: 5, marginTop: 0 },
  thumb: {
    height: 16,
    width: 16,
    backgroundColor: theme.white,
    borderWidth: 1,
    boxShadow: theme.shadows.sm,
  },
}));

function Demo() {
  const { classes } = useStyles();

  return (
    <Slider
      classNames={{
        track: classes.track,
        mark: classes.mark,
        markFilled: classes.markFilled,
        markLabel: classes.markLabel,
        thumb: "border-red-600",
      }}
    />
  );
}
thumb class の付与された要素に上書き用 class と Tailwind CSS の border-red-600 が同時に付与されている

おわりに

今回は Mantine という React 用UIコンポーネントライブラリの特徴とコンポーネントのカスタマイズ方法についてまとめてみました。

Mantine Hook という便利な hooks 集が公式で用意されていることや、豊富なスタイリング方法が用意されているというところでユニークな魅力があるコンポーネントライブラリだと感じました。

機会があれば積極的に使っていきたいです。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。