150以上のコンポーネントを揃えたReact Suiteで、管理画面開発の手数を減らす

はじめに

社内向けの管理画面やダッシュボードを作るとき、DatePickerやTreePicker、編集可能なTableなど、地味に実装コストがかさむコンポーネントに頭を悩ませたことはないでしょうか。デザインシステムを一から整備する余裕はないけれど、見た目も使い勝手もそれなりに整った画面は作りたい。そんな悩みに応えてくれるのが、今回紹介する「React Suite」です。

React Suiteとは

React Suiteは「A suite of React components, designed for enterprise system products」を掲げる、業務システム向けのReactコンポーネントライブラリです。GitHubスター数は8.7kを超え、MITライセンスで公開されています。TypeScriptで書かれており、Next.js・Create React App・Viteなど主要なビルドツールに対応しているため、既存プロジェクトへの導入もスムーズです。

主な特徴

圧倒的なコンポーネント数 - Button・Form・DatePicker・TreePicker・編集可能なTableなど150以上のコンポーネントを標準搭載しており、業務システムでよく使う部品がひと通り揃っています
CSS変数ベースのテーマシステム - ダークモードやブランドカラーへの切り替えが、CSS変数を上書きするだけで完結します
国際化・アクセシビリティ対応 - 多言語対応に加えてWAI-ARIA標準に準拠しており、グローバル向けの業務システムでも安心して使えます
レスポンシブなグリッドシステム - 24列グリッドを備え、モバイルファーストなレイアウト調整が簡単に行えます

インストール

npm、Yarn、pnpmのいずれでもインストール可能です。

# npm
npm install rsuite

# yarn
yarn add rsuite

# pnpm
pnpm add rsuite

基本的な使い方

まずはButtonコンポーネントを表示するだけの最小構成です。CSSの読み込みを忘れると、コンポーネントは動作してもスタイルが当たらない状態になるので注意してください。

import { Button } from 'rsuite';
import 'rsuite/dist/rsuite.css';

function App() {
  return (
    <Button appearance="primary" onClick={() => alert('Hello, React Suite!')}>
      送信する
    </Button>
  );
}

export default App;

appearance プロパティで見た目を切り替えられます。primary のほかにも default や ghost、link などが用意されており、用途に応じて使い分けが可能です。

実践的なユースケース

管理画面でよくある「日付を選んでデータを絞り込む」フォームを、DatePickerとSelectPickerを組み合わせて実装してみましょう。

import { useState } from 'react';
import { DatePicker, SelectPicker, Button, Form } from 'rsuite';
import 'rsuite/dist/rsuite.css';

const statusOptions = [
  { label: '公開中', value: 'published' },
  { label: '下書き', value: 'draft' },
  { label: 'アーカイブ', value: 'archived' },
];

function SearchForm() {
  const [date, setDate] = useState<Date | null>(null);
  const [status, setStatus] = useState<string | null>(null);

  const handleSearch = () => {
    console.log({ date, status });
  };

  return (
    <Form layout="inline">
      <Form.Group>
        <Form.ControlLabel>公開日</Form.ControlLabel>
        <DatePicker value={date} onChange={setDate} placeholder="日付を選択" />
      </Form.Group>

      <Form.Group>
        <Form.ControlLabel>ステータス</Form.ControlLabel>
        <SelectPicker
          data={statusOptions}
          value={status}
          onChange={setStatus}
          placeholder="ステータスを選択"
        />
      </Form.Group>

      <Button appearance="primary" onClick={handleSearch}>
        検索
      </Button>
    </Form>
  );
}

export default SearchForm;