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

2022.04.05

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

Mantineとは

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

特徴

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

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

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

  • 使いやすいhooksの提供
  • 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など、便利な機能があります。コンポーネントも豊富で、これからどんどん使っていこうと思います。