2021/01/16 2021/01/17

カテゴリー Tech タグ react javascript

Reactのリサイズ可能なスプリットレイアウトライブラリの比較

react-split-pane

react-split-pane Basic

SplitPaneコンポーネントsplit propsを与えて、レイアウトを行う。

最小、最大、デフォルト値などの設定が可能であるが、SplitPaneコンポーネントで囲われた最初の要素に適応されることに注意。

<SplitPane split="horizontal" minSize={10} maxSize={100}>
    <div /> {/* <- この要素に最小サイズと最大サイズが反映される*/}
    <div />
</SplitPane>

react-split-pane Event

SplitPaneコンポーネントで囲われた最初の要素のサイズを第一引数から受け取ることができる。
2つ目の要素のサイズを取得したい場合、component-sizeを導入するとよい。

<SplitPane split="horizontal" onChange={(pane1Size)=>{console.log(pane1Size)}}>
    <div /> {/* <- この要素のサイズがログに出力される*/}
    <div />
</SplitPane>

react-split-pane Style

SplitPaneコンポーネントで囲まれた要素には、自動的にPaneコンポーネントでラップされる。

{/* コーディング */}
<SplitPane split="horizontal" onChange={(pane1Size)=>{console.log(pane1Size)}}>
    <div /> 
    <div />
</SplitPane>

{/* コンパイル */}
<SplitPane split="horizontal" onChange={(pane1Size)=>{console.log(pane1Size)}}>
    <div class="Pane"><div /></div> 
    <div class="Pane"><div /></div>
</SplitPane>

この時のスタイルがうまくいかない場合、pane1Style pane2Style propsを使用して、スタイルのカスタムを行う。

<SplitPane
    pane1Style={{backgroundColor: "red"}}
    pane2Style={{backgroundColor: "green"}}
>
    <div class="Pane"><div /></div> {/* red */} 
    <div class="Pane"><div /></div> {/* green */}
</SplitPane>

react-split-pane 所感

二つ目の要素のサイズが取得できないのが不満だが、おそらく一番安定したライブラリなので、とりあえずこれを導入するのがよい。

react-resize-layout

react-resize-layout
個人的に使いやすいと感じたが、メンテナンスがされていないライブラリ。

サンプル

react-resize-layout Basic

ResizeコンポーネントResizeHorizon ResizeVerticalコンポーネントをラップして使用する

<Resize handleWidth="5px" handleColor="#777">
    <ResizeHorizon width="100px">Horizon 1</ResizeHorizon>
    <ResizeHorizon width="200px" minWidth="150px">
        Horizon 2
    </ResizeHorizon>
    <ResizeHorizon minWidth="5px">Horizon 3</ResizeHorizon>
</Resize>

react-resize-layout Event

Resizeコンポーネントにイベントを渡す。

options type default description
onResizeStart callback Calls when resize start
onResizeStop callback Calls when resize stop
onResizeMove callback Calls when resize move
onResizeWindow callback Calls when window resize

resize-split-paneより多くのイベントが用意されており、Resizeコンポーネントでラップされた要素のサイズをすべて取得することができる。

import React from "react";
import { Resize, ResizeVertical, ResizeHorizon } from "react-resize-layout";

export default function App() {
  return (
    <Resize>
      <ResizeHorizon width="300px">Explorer</ResizeHorizon>

      <ResizeHorizon minWidth="5px">
        <Resize>
          <ResizeVertical height="80%">
            <Resize handleWidth="3px">
              <ResizeHorizon width="100px" minWidth="10px">
                Editor
              </ResizeHorizon>

              <ResizeHorizon minWidth="5px">score</ResizeHorizon>
            </Resize>
          </ResizeVertical>

          <ResizeVertical minHeight="5px">footer</ResizeVertical>
        </Resize>
      </ResizeHorizon>
    </Resize>
  );
}

react-resize-layout 所感

react-split-paneより機能が豊富で非常によいと感じた。
しかし、タイプのプルリクを2年近く無視していることや、開発環境によってはResizeコンポーネントで深いネストを行うとエラーが発生する。

react-resize-layoutを検討してみる

動作するのであれば、使用してよいと考える。

react-splitter-layout

react-splitter-layout

リファレンスが少ないライブラリ。react-split-paneのほうがいいかも

RaspberryPi ZeroでWifiにつながらない場合にやること

RaspberryPiのWifiの設定でつまずいたときの解決方法

bluetoothctlのpairは成功するが、connectが失敗する

RaspberryPiのbluetoothctlコマンドのconnectが失敗するときの解決方法

RaspberryPi Zeroでgattlibのインストールが失敗する

RaspberryPi Zeroでpybluez[ble]のgattlibのインストールに失敗したときの解決方法

Reactのリサイズ可能なスプリットレイアウトライブラリの比較

Reactのリサイズ可能なスプリットレイアウトライブラリの比較