ReactUIライブラリ Mantineのバージョンアップによる最近の変更点や追加機能をまとめてみた

#Next.js

#Mantine

北川慶太

2022.08.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。データアナリティクス事業本部サービスソリューション部の北川です。

Mantineとは

Mantineは、ReactのUIライブラリになります。UIライブラリといえば、MUIやChakura UIが有名ですが、Mantineもその一つです。カスタマイズ可能な豊富なコンポーネント、hooksを提供しています。ドキュメントもわかりやすく、使用率の高いReactフレームワークでの使用方法なども、丁寧に記述されています。

基本的な使い方については、以下のエントリで記述しています。

Mantineは更新頻度が高く、現時点でv5.1まで出ています。上記のエントリからもアップデートされており、今回はMantineの最近追加された機能や変更点について、まとめてみました。

Mantine.Providerのtheme設定

プロジェクト配下のコンポーネントで、共通の設定を記述する際に使用するdefaultPropsや、classNameは、ManineProviderのtheme内に格納することで、使えるようになります。

Next.jsの_app.tsxでの例

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { MantineProvider } from "@mantine/core";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            defaultProps: {
              size: "sm",
              color: "lime",
            },
          },
          Text: {
            defaultProps: {
              size: "xl",
              color: "red",
            },

          }
        },
      }}
    >
      <Component {...pageProps} />
    </MantineProvider>
  );
}

export default MyApp;

import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import { Button, Text } from "@mantine/core";

const Home: NextPage = () => {
  return (
    <main className={styles.main}>
      <h1 className={styles.title}>Mantine</h1>
      <Text>Text Component</Text>
      <Button>Button</Button>
    </main>
  );
};

export default Home;

また、emotionChacheの設定などもProvider上でカスタマイズできるよう対応しました。そのため、依存関係のある@emotionパッケージは、mantineをインストールするときに自動インストールされていましたが、手動でインストールするようになりました。

yarn add @mantine/core @mantine/hooks @mantine/next @emotion/server @emotion/react

Unstyled components

コンポーネントにunstyledというpropsを指定することで、デフォルトで付いているスタイルを取り除くことができます。より厳密で、一からスタイリングしたい場合などで使用する場面は少なくないと思います。

import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import { Button, Text } from "@mantine/core";
import { CarouselComponent } from "../components/carousel";


const Home: NextPage = () => {
  return (
    <main className={styles.main}>
      <h1 className={styles.title}>Mantine</h1>
      // スタイルを取り除く
      <Text unstyled>Text Component</Text>
      <Button unstyled>Button</Button>
    </main>
  );
};

export default Home;

コンポーネント、フックの変更

タブ、アコーディオン、ツールチップなどのコンポーネントが変更されました。構造自体が変わっているので、既存のプロジェクトをアップデートする時は、変更点が多いので手間がかかると思います。指定できるpropsも変更されています。

コンポーネントだけでなく、フックも変更されています。例えば、stateを入れ替えるuseToggle()の例を見ます。

const [label, toggle] = useToggle("blue", ["blue", "orange"]);

const [label, toggle] = useToggle(["blue", "orange"]);

第一引数のみの指定になり、デフォルトは第一引数の一番目になりました。

新しいコンポーネント、フックの追加

変更だけでなく、フルスクリーンで表示するモーダルなどの新しいコンポーネントやフックも、v5.0で追加されました。個人的に、並んでいるボタンの接しているボーダー部分を統合して一つにする、ボタングループコンポーネントは、使用する場面も多く便利だと思います。

  return (
      <Button.Group>
        <Button variant="outline">Button1</Button>
        <Button variant="outline">Button2</Button>
        <Button variant="outline">Button3</Button>
      </Button.Group>
  );

Button.Groupでラッピングする前

ラッピングした後

新しいパッケージの提供

@mantine/carousel packageにより、カルーセルを使用できるようになりました。地味に嬉しいです。実際に使ってみました。

カルーセルをインストール

$ yarn add @mantine/carousel

また、依存関係のあるembla-carousel-reactもインストールします。

$ yarn add embla-carousel-react

コンポーネントの作成

import { Carousel } from "@mantine/carousel";
import { Paper } from "@mantine/core";

export const CarouselComponent = () => {
  const colorList = ["red", "blue", "lime", "orange", "pink", "skyblue"];

  return (
    <Carousel
      slideSize="40%"
      breakpoints={[{ maxWidth: "sm", slideSize: "100%", slideGap: 2 }]}
      slideGap="xl"
      align="start"
    >
      {colorList.map((color) => {
        return (
          <Carousel.Slide key={color}>
            <Paper
              p="xl"
              m="sm"
              radius="md"
              sx={{ backgroundColor: color }}
              style={{ height: "200px" }}
            />
          </Carousel.Slide>
        );
      })}
    </Carousel>
  );
};