Flowbite Reactでお手軽にダッシュボードを構築

ある日、Reactプロジェクトにおけるダッシュボードのフロントをデザインなしで実装する案件がありました。
デザイン指定がないとはいえ、それっぽいモダンなレイアウトは確保したい。
そこで今回「Flowbite React」を試してみます。
Flowbite React Components

「Flowbite」は「Tailwind CSS」のコンポーネントで、クラスを指定するだけでモダンな見た目を提供してくれます。
応用性がある反面、クラスの指定が多少細かいので冗長になりがちです。
「Flowbite React」では、簡単な引数を指定するだけで、Flowbiteを適用することができます。

今回試した環境は以下の通りです。Tailwind CSSなどはインストール済みを前提とします。

• Windows 11 Home
• Node.js 16.19.1
• React 18.2.0
• Tailwind CSS 3.2.7
• Flowbite 0.4.3

Flowbite Reactのインストール

まず、npmコマンドでFlowbiteとFlowbite Reactをインストールします。

> npm install flowbite flowbite-react

Tailwind CSSの設定ファイル「tailwind.config.js」を更新します。
ファイルがない場合は、以下のコマンドで初期化します。

> tailwindcss init -p

ファイルを開き、contentとpluginsに以下の2行を追記します。

module.exports = {
	content: [
		...,
		'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
	],

	plugins: [
		...,
		require('flowbite/plugin')
	],
};

インストールは以上です。

Flowbite Reactの使い方

使い方はFlowbite Reactの公式サイトに詳細がありますが、例えばボタンコンポーネントを使用する場合、以下のようにReactで記述します。

import { Button } from "flowbite-react";
...
<Button>ボタン</Button>
...

緑色のボタンにする場合は

<Button color="success">緑色のボタン</Button>

さらに大きくするには

<Button color="success" size="xl">大きな緑色のボタン</Button>

楽ちんですね。

Flowbite Reactを使わずにFlowbiteを使う場合

ちなみに、コンポーネントなしにFlowbiteで同じような実装をすると、以下のようになります。

<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">ボタン</button>

<button type="button" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">緑のボタン</button>

この冗長なクラスの列を整理したくて、Reactのコンポーネントをせっせと実装していたのですが、既にそれを実現した「Flowbite React」が存在したというお話です。
おかげさまで開発の手間がだいぶ短縮されました。