memo：Reactの画面分割ライブラリ

よわよわエンジニアが知ったことのメモ日記です

ことの発端

Next.jsを使っていて、画面を右と左に２分割して使いたい。当然ながらCSSで頑張れば実装は可能だと思うが、Reactのコンポーネントライブラリで簡単に作れるものがないか探したいというのが発端。

結構あるあるのユースケースだし幾らでも記事でてくるだろうと思っていたら、案外日本語の使ってみた系のページが少なかったので、机上調査をまとめておく。

一部動作確認した時の環境は以下の通り

+-- @types/node@20.9.4
+-- @types/react-dom@18.2.17
+-- @types/react@18.2.38
+-- next@14.0.3
+-- react-dom@18.2.0
+-- react-split-pane@2.0.3
+-- react-split@2.0.14
+-- react@18.2.0
`-- typescript@5.3.2

最終的に使うことにしたのは react-split-pane 。
簡単に使えそうだったので最小労力でやりたいことが出来るものとして選択した。

split

github.com

Star 5.9k。Sopnsorもついていて安定していそうな印象を受けた。 Split.jsをReact Component化したものっぽく有名どころが元となっている点も良い。

日本語の記事もあった

React-Splitを使って画面分割を実現する

公式をコピペしてやってみたけど、スプリットされない。。

<Split
    sizes={[25, 75]}
    minSize={100}
    
    expandToMin={false}
    gutterSize={10}
    gutterAlign="center"
    snapOffset={30}
    dragInterval={1}
    direction="horizontal"
    cursor="col-resize"
>
    <div style={{border:1, color: 'red'}}>aaa</div>
    <div style={{border:1}}>bbb</div>
</Split>

本当は2つのdivが左右に分かれるはずなのだが、divの中身が縦に二つ並んでしまう。スプリットの境界をドラッグすることも出来ず、境界線も表示されなかった。特にエラーも出ていなかったのだが、Reactのバージョンが問題かもしれない。

react-split-pane

github.com Star 3.1k。こちらも日本語の記事が数件存在していた。

インストールしようとしたが、エラーが出た。どうやら最近のReactには対応していないらしい。

$ npm install react-split-pane --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: proto@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0-0" from react-split-pane@0.1.92
npm ERR! node_modules/react-split-pane
npm ERR!   react-split-pane@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /root/.npm/_logs/2023-11-26T02_50_51_639Z-eresolve-report.txt

公式画面の一番下の方に書いてあった。