React用UIコンポーネントライブラリ「Mantine」を触ってみる
こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。
今回は Mantine という React 用UIコンポーネントライブラリを触ってみたのでその特徴とコンポーネントのカスタマイズ方法についてまとめてみたいと思います。
Mantine UIとは？
Mantine UI は MUI や Chakra UI のような React 用UIコンポーネントライブラリの一つです。100 を超えるカスタマイズ可能なコンポーネントと 40 の hooks が用意されています。TypeScript もしっかりサポートしています。
yarn で導入することで使い始めることができます。
$ yarn add @mantine/core @mantine/hooks @emotion/reactMantine の特徴
基本的なレイアウト用コンポーネントからトランジションを持つコンポーネントまで網羅されている
コンポーネントは Grid のようなレイアウトを扱うためのものから Text、 Table などの表示系、 Accordion や Modal Overlay のようなトランジションを持つコンポーネントまで一通り網羅されている印象です。
また、カスタムスクロールバーのある領域を実装する ScrollArea やレスポンシブで一貫した幅と高さの比率を維持する AspectRatio という少しユーティリティに近いコンポーネントも用意されており、これは他のUIライブラリには無い特徴かなと思います。
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 のスタイルシステムを使用しているため、内部的にはランダムなクラス名が生成されて付与される形になります。
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",
}}
/>
);
}
おわりに
今回は Mantine という React 用UIコンポーネントライブラリの特徴とコンポーネントのカスタマイズ方法についてまとめてみました。
Mantine Hook という便利な hooks 集が公式で用意されていることや、豊富なスタイリング方法が用意されているというところでユニークな魅力があるコンポーネントライブラリだと感じました。
機会があれば積極的に使っていきたいです。
Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています
弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
