React UIライブラリ Mantineの使いやすいhooksをまとめてみた

#React

#Mantine

北川慶太

2022.06.22

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

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

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

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

MantineはUIコンポーネントの他にも、豊富なhooksを提供しています。今回はその中でも、個人的に使いやすいhooksについて、紹介したいと思います。

use-input-state

use-input-stateは、ネイティブ入力 (onChange ハンドラでイベントを指定) とカスタム入力 (onChange ハンドラで値を指定) の状態を処理します。フックはすべての Mantine およびネイティブインプットで動作します。

use-input-stateは、入力値の状態を管理します。使用するフォームでonChangeに指定します。

import { useInputState } from "@mantine/hooks";
import { TextInput, NumberInput } from "@mantine/core";

const Sample = () => {
  const [stringValue, setStringValue] = useInputState<string>("");
  const [numberValue, setNumberValue] = useInputState<number>(0);

  console.log(stringValue)

  return (
    <div style={{margin: "50px auto", width: "400px"}}>
      <TextInput value={stringValue} onChange={setStringValue} />
      <NumberInput value={numberValue} onChange={setNumberValue} />
    </div>
  );
}

export default Sample;

stringValueの状態を取得できています。

use-focus-within

指定した要素内のフォームに、フォーカスが当たっているかどうかを検出し、真偽値を返します。フォーカスが当たっている場合のみ、スタイルを追加する機能の実装で用います。

import { useFocusWithin } from "@mantine/hooks";
import { TextInput, Button, Box, Text } from "@mantine/core";

const Sample = () => {
  const { ref, focused } = useFocusWithin();
  return (
    <div ref={ref}>
      <Box
        sx={(theme) => ({
          backgroundColor: focused
            ? "lime"
            : "transparent",
          padding: theme.spacing.xl,
        })}
      >
        <Text size="sm">One of elements has focus: {focused.toString()}</Text>
        <TextInput
          label="Focus this input"
          placeholder="Styles will be added to parent"
        />
        <Button mt="md">Button</Button>
      </Box>
    </div>
  );
}

export default Sample;

フォーカスが当たっていない時:false

フォーカスが当たっている時:true

use-element-size

指定した要素の幅と高さを取得できます。

import { Container, Space } from "@mantine/core";
import { useElementSize } from "@mantine/hooks";

const Sample = () => {
  const { ref, width, height } = useElementSize();

  return (
    <Container>
      <Space h="md" />
      <textarea ref={ref} style={{ width: 400, height: 120 }} />
      <div>
        Width: {width}px, height: {height}px
      </div>
    </Container>
  );
}

export default Sample;

use-resize-observer

use-element-sizeと同様、幅と高さを取得し、要素の位置も合わせて取得します。

import { Text, Code, Container, Space } from "@mantine/core";
import { useResizeObserver } from "@mantine/hooks";

const Sample = () => {
  const [ref, rect] = useResizeObserver();

  return (
    <Container>
      <Space h="md" />
      <textarea ref={ref} style={{ width: 400, height: 120 }} />
      <Text align="center">
        Rect: <Code>{JSON.stringify(rect)}</Code>
      </Text>
    </Container>
  );
};

export default Sample;

use-media-query

use-media-queryは、ブラウザ幅に応じて変化する機能を実装できます。引数としてメディアクエリを受け取り、与えられたクエリの条件に対する真偽値を返します。第二引数には、APIが機能しない場合に対応する、初期値を指定できます。

複雑なスタイリングには適さないですが、簡単な要素の出し入れなどでは、cssを別途記述する必要がなくなります。

import { Badge, Center } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";

export const Sample = () => {
  const matches = useMediaQuery("(min-width: 500px)");

  return (
    <Center style={{ width: 400, height: 200 }}>
      <Badge
        suppressHydrationWarning
        color={matches ? "teal" : "red"}
        variant="filled"
      >
        Breakpoint
        {matches ? "matches" : "does not match"}
      </Badge>
    </Center>
  );
};

export default Sample;