React Split を使って画面を分割してみる

React Split は、React アプリケーションにおいて、画面を柔軟に分割するためのライブラリです。この記事では、React Split の基本的な使い方を紹介します。

インストール

React Split を使用する前に、まずはライブラリをプロジェクトにインストールする必要があります。以下のコマンドを実行してください。

npm install --save react-split

このコマンドにより、react-splitがプロジェクトの依存関係に追加されます。

横方向に画面分割

横方向の画面分割を行うには、Split コンポーネントを利用して子要素を配置します。以下は基本的な実装例です。

import Split from 'react-split';

function HorizontalSplit() {
  return (
    <Split sizes={[50, 50]} minSize={100} expandToMin={false} gutterSize={10} gutterAlign="center" snapOffset={30} dragInterval={1}>
      <div>左のパネル</div>
      <div>右のパネル</div>
    </Split>
  );
}

ここで、sizes プロパティはパネルの初期サイズの割合をパーセンテージで定義します。gutterSize はパネル間のガター（分割バー）の厚さを指定します。

縦方向に画面分割

縦方向に画面を分割する場合も、横方向と同様に Split コンポーネントを使用しますが、direction プロパティを vertical に設定します。

import Split from 'react-split';

function VerticalSplit() {
  return (
    <Split direction="vertical" sizes={[75, 25]} minSize={50} expandToMin={true} gutterSize={10} gutterAlign="center" snapOffset={20} dragInterval={1}>
      <div>上のパネル</div>
      <div>下のパネル</div>
    </Split>
  );
}

この設定により、縦方向に75%と25%の割合で画面が分割されます。minSize はパネルの最小サイズをピクセル単位で指定します。