docs/src/pages/ja/(pages)/integrations/mantine.mdxmdx6.1 KiB00810508

title: Mantine UI category: Integrations order: 5

import Link from "../../../../components/Link.jsx";

Mantine UI

@lazarv/react-serverは、フル機能のReactコンポーネントライブラリであるMantineと互換性があります。クライアントコンポーネントでMantineコンポーネントを使用し、サーバーサイドレンダリングのサポート、MantineのスタイリングシステムのためのPostCSS設定、テーマのためのMantineProviderを利用できます。

<Link name="installation"> ## インストール </Link>

Mantineと必要なPostCSS依存関係をインストールします:

pnpm add @mantine/core @mantine/hooks
pnpm add -D postcss postcss-preset-mantine postcss-simple-vars

<Link name="postcss-configuration"> ## PostCSS設定 </Link>

Mantineにはpostcss-preset-mantineプラグインとブレークポイント変数を含むPostCSS設定が必要です:

module.exports = {
  plugins: {
    "postcss-preset-mantine": {},
    "postcss-simple-vars": {
      variables: {
        "mantine-breakpoint-xs": "36em",
        "mantine-breakpoint-sm": "48em",
        "mantine-breakpoint-md": "62em",
        "mantine-breakpoint-lg": "75em",
        "mantine-breakpoint-xl": "88em",
      },
    },
  },
};

<Link name="provider-setup"> ## プロバイダーのセットアップ </Link>

コアMantineスタイルをインポートし、ルートレイアウトでMantineProviderでアプリをラップします。スタイルなしコンテンツのフラッシュを防ぐために、<head>にColorSchemeScriptを含めます:

import "@mantine/core/styles.css";

import { ColorSchemeScript, createTheme, MantineProvider } from "@mantine/core";

const theme = createTheme({
  /** Mantineのテーマオーバーライドをここに記述 */
});

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-mantine-color-scheme="light" suppressHydrationWarning>
      <head>
        <ColorSchemeScript />
      </head>
      <body suppressHydrationWarning>
        <MantineProvider theme={theme}>
          {children}
        </MantineProvider>
      </body>
    </html>
  );
}

<Link name="using-components"> ## コンポーネントの使用 </Link>

ReactフックやブラウザAPIを使用するMantineコンポーネントは、クライアントコンポーネントで使用する必要があります。クライアントコンポーネントを作成し、必要なMantineコンポーネントをインポートします:

"use client";

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

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <Group>
      <Button onClick={() => setCount((c) => c - 1)}>-</Button>
      <Text>{count}</Text>
      <Button onClick={() => setCount((c) => c + 1)}>+</Button>
    </Group>
  );
}

次に、サーバーコンポーネントページからクライアントコンポーネントを使用します:

import { Counter } from "../components/Counter";

export default function HomePage() {
  return <Counter />;
}

<Link name="navigation"> ## ナビゲーション </Link>

@lazarv/react-serverのクライアントサイドナビゲーションでMantineのNavLinkなどのナビゲーションコンポーネントを使用するには、componentプロップを介してランタイムのLinkコンポーネントを渡します:

"use client";

import { NavLink } from "@mantine/core";
import { Link, usePathname } from "@lazarv/react-server/navigation";

export function MainNavigation() {
  const pathname = usePathname();

  return (
    <>
      <NavLink
        component={Link}
        to="/"
        label="Home"
        active={pathname === "/"}
      />
      <NavLink
        component={Link}
        to="/about"
        label="About"
        active={pathname === "/about"}
      />
    </>
  );
}

<Link name="extension-packages"> ## 拡張パッケージ </Link>

Mantineは追加機能のための多くの拡張パッケージを提供しています。使用するページやレイアウトでスタイルをインポートします:

import "@mantine/dates/styles.css";

import { MyDates } from "../components/MyDates";

export default function DatesPage() {
  return <MyDates />;
}

よく使われるMantine拡張パッケージとそのスタイルインポート:

パッケージ	スタイルインポート
`@mantine/dates`	`@mantine/dates/styles.css`
`@mantine/charts`	`@mantine/charts/styles.css`
`@mantine/notifications`	`@mantine/notifications/styles.css`
`@mantine/code-highlight`	`@mantine/code-highlight/styles.css`
`@mantine/carousel`	`@mantine/carousel/styles.css`
`@mantine/spotlight`	`@mantine/spotlight/styles.css`
`@mantine/nprogress`	`@mantine/nprogress/styles.css`
`@mantine/tiptap`	`@mantine/tiptap/styles.css`
`@mantine/dropzone`	`@mantine/dropzone/styles.css`

<Link name="client-only-components"> ## クライアント専用コンポーネント </Link>

一部のコンポーネント（ブラウザAPIに依存するチャートなど）はサーバーサイドレンダリングができません。@lazarv/react-server/clientのClientOnlyを使用して、クライアントでのみレンダリングします:

import "@mantine/charts/styles.css";

import { ClientOnly } from "@lazarv/react-server/client";
import { MyAreaChart } from "../components/MyAreaChart";

export default function ChartsPage() {
  return (
    <ClientOnly>
      <MyAreaChart />
    </ClientOnly>
  );
}

@lazarv/react-serverでMantine UIを使用する完全な例については、Mantine exampleを確認してください。