React UIライブラリMantineの最近追加された機能を触ってみた

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

Mantineとは

Mantineは、ReactのUIライブラリになります。

基本的な使用方法については、以下のブログで書いています。

今回は、最近のMantineのバージョンアップによって追加されたコンポーネントやフックを試してみました。

8月にも似たようなエントリを投稿したのですが、その時のバージョンは5.1でした。2022年の12月、投稿時点では、v5.9が最新になります。

use-eye-dropper hook

useEyeDropper()を使用すると、カーソル上の色を選択できます。

import { useState } from "react";
import { ActionIcon, Group, ColorSwatch, Text } from "@mantine/core";
import { useEyeDropper } from "@mantine/hooks";
import { Box } from "@chakra-ui/react";

const Drop = () => {
  const [color, setColor] = useState("");
  const { supported, open } = useEyeDropper();

  const pickColor = async () => {
    try {
      const { sRGBHex } = await open();
      setColor(sRGBHex);
    } catch (e) {
      console.log("e", e);
    }
  };

  if (!supported) {
    return (
      <Text ta="center">EyeDropper API is not supported in your browser</Text>
    );
  }

  console.log("color", color);

  return (
    <Box m="40" border="1px" p="5">
      <Group>
        <ActionIcon variant="default" onClick={pickColor}></ActionIcon>
        {color ? (
          <Group spacing="xs">
            <ColorSwatch color={color} />
            <Text>Picked color: {color}</Text>
          </Group>
        ) : (
          <Text>Click the button to pick color</Text>
        )}
      </Group>
      <Group>
        <Box mt="3" w="10" h="10" bg="blue"></Box>
        <Box mt="3" w="10" h="10" bg="red"></Box>
      </Group>
    </Box>
  );
};

export default Drop;

ColorInput

また、カラーピッカーのフォームタグを実装するColorInputコンポーネントもあります。

AppShell alt layout

管理画面レイアウトを簡単に作成できるAppShellというコンポーネントにlayoutにalt属性を指定することで、サイドバーを優先したレイアウトに変更できるようになります。

• 通常のAppShell

• layoutにaltを指定

use-favicon hook

ファビコンを切り替えるフックです。使い所は難しいですが、面白い機能です。

import { useState } from "react";
import { useFavicon } from "@mantine/hooks";
import { Group, Button } from "@mantine/core";

const Demo = () => {
  const [favicon, setFavicon] = useState("");
  const setTwitterFavicon = () => setFavicon("https://twitter.com/favicon.ico");
  const setMantineFavicon = () => setFavicon("https://mantine.dev/favicon.svg");

  useFavicon(favicon);

  return (
    <Group p="xl">
      <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
      <Button onClick={setMantineFavicon}>Mantine favicon</Button>
    </Group>
  );
};

export default Demo;

まとめ

今回は、mantineの最近のバージョンアップで追加された機能について触ってみました。 Mantineは、既にNext.js v13用のテンプレートが存在していたり、バージョンアップが頻繁にされているので、今後も楽しみです。

ではまた。