Mantineって何？

Mantineとは

Reactで使えるUIライブラリのこと。
コンポーネント以外にも、カスタムhooksライブラリやformライブラリなども提供している。

特徴

• 実用的なUIコンポーネントが網羅されている。
  • 例
    • ボタン、入力フォーム、テーブル
    • grid、flexなどのレイアウト
    • メニュー、タブ、ページネーション
    • モーダルダイアログ、ドロワーメニューなどのオーバーレイ表示
    • グラフ、デイトピッカー
• カスタマイズしやすい。
  • コンポーネントごとに、よく使われる便利なプロパティが定められており、独自の動きやスタイルを設定可能。
  • スタイルの独立性を高めるCSSModulesにより、他のコンポーネントに影響を与えずにスタイル変更可能。
• モダンなJavaScriptフレームワークに対応している。
  • UI実装が容易なため、インタラクティブな操作が多く、複雑なコンポーネントが多いSPAに適している。

利用手順

1. 依存関係をインストールする。
   • 状況に応じて不要なものはインストールから外してください。

   yarn add yarn add @mantine/core @mantine/hooks@ @mantine/form @mantine/next @emotion/server @emotion/react
   

2. App.tsxにスタイルのインポートとProvidewを追加する。

   import '@mantine/core/styles.css';
   import { MantineProvider } from '@mantine/core';
   
   export default function App() {
     return <MantineProvider>{/* Your app here */}</MantineProvider>;
   }
   

3. 開発サーバーを起動して動作確認を行う。

   npm run dev
   

参考

Mantine
React用の柔軟に使えるUIライブラリ「Mantine」の特長と使い方を解説
実務で Mantine UI を使用した所感
React向けコンポーネントライブラリにMantineを採用した理由