ReactのUIライブラリMantineを試してみた

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 最近、Mantineというライブラリが自分の周りで熱いので、今回はその中でもhooksの機能をメインに触ってみました。

Mantineとは

Mantineは、ReactのUIライブラリになります。UIライブラリといえば、MUIやChakura UIが有名ですが、Mantineもその一つです。120を超えるカスタマイズ可能なコンポーネント、hooksを提供しています。名前の由来はポケモンのマンタインからきているとかいないとか。

特徴

写真は、Mintineのボタンコンポーネントのドキュメントページです。見ての通り、右側のフォームを変更することで、コンポーネントをカスタマイズできます。変更値はそのままサンプルコードに反映されますので、コピーするだけで、コンポーネントを使えます。変更できる項目も豊富で、十分だと思います。

こちらはフォームコンポーネント

MantineはtypeScriptをデフォルトでサポートしています。

Mantineはコンポーネントだけでなく、10種類以上のhooksを提供しています。hooksを使用することで、コードの記述量が減りコンポーネントがスッキリします。

Mantine hooksを使用する

今回はhooksに焦点を当てていきます。

プロジェクトの作成。今回はNext.jsで作成します。

npx create-next-app --ts

Mantineをインストール

yarn add @mantine/hooks @mantine/core @mantine/next
## または
npm install @mantine/hooks @mantine/core @mantine/next

useStateを使用した記述

フォームと、ボタンを作成します。ボタンは押すとテキストが入れ替わるようにします。 まずは、useStateを使ってindex.tsxを変更します。

index.tsx

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

const Home: NextPage = () => {
  const [value, setValue] = useState("");
  const [label, setLabel] = useState<"blue" | "orange">("blue");

  const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  const toggle = () => {
    if (label === "blue") {
      setLabel("orange");
    } else {
      setLabel("blue");
    }
  };

  return (
    <main className={styles.main}>
      <h1 className={styles.title}>Mantine hooks!!</h1>
      <TextInput style={{margin: "1rem"}} value={value} onChange={onChangeValue} />
      <Button color={label} onClick={() => toggle()}>
        {label}
      </Button>
    </main>
  );
};

export default Home;

今回は比べやすいように、少し冗長ですが上記のように記述。 動作確認してみます。

yarn dev

シンプルですが、フォームとボタンを作成できました。

hooksを使用した記述

ではhooksを使用します。今回はuseInputStateと、useToggleを使用します。再度、index.tsxを変更します。

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

const Home: NextPage = () => {
  const [value, setValue] = useInputState("");
  const [label, toggle] = useToggle("blue", ["blue", "orange"]);

  return (
    <main className={styles.main}>
      <h1 className={styles.title}>Mantine hooks!!</h1>
      <TextInput style={{ margin: "1rem" }} value={value} onChange={setValue} />
      <Button color={label} onClick={() => toggle()}>
        {label}
      </Button>
    </main>
  );
};

export default Home;

いかがでしょうか。先ほどと比べると、コード量が減り可読性が上がったと思います。

debounce機能をMantine hooksを使って実装

他にも、debounce機能を提供するuseDebouncedValueなどのhooksもあります。

第一引数に管理する値、第二引数に待機時間を指定します。

index.tsx

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

const Home: NextPage = () => {
  const [value, setValue] = useInputState("");
  const [label, toggle] = useToggle("blue", ["blue", "orange"]);

  const [debounced] = useDebouncedValue(value, 1000, { leading: true });

  return (
    <main className={styles.main}>
      <h1 className={styles.title}>Mantine hooks!!</h1>
      <TextInput style={{ margin: "1rem" }} value={value} onChange={setValue} />
      <Text>Debounced value: {debounced}</Text>
      <Button color={label} onClick={() => toggle()}>
        {label}
      </Button>
    </main>
  );
};

export default Home;

ちなみに、useDebouncedValueの第三引数に{leading:true}を指定することで、最初の値が変更した状態を取得することができます。

入力が終わったタイミングで、値が変更されているのが確認できます。自分でdebounce機能を作成すると、どうしても記述量が増えますが、Mantine hooksを利用することで、一行で実装することができました。

まとめ

今回はMantineのhooksを試してみました。Mantineには他にも、フォームバリデーション機能を持つuse-formなど、便利な機能があります。コンポーネントも豊富で、これからどんどん使っていこうと思います。