Reactでいい感じのサブウィンドウを実装する ⑤ 初期表示の設定方法

シリーズ記事です。
初めての方は、こちら を最初に読んでください

今回は、Reactでサブウィンドウの初期表示の設定方法について説明していきます。

やり方

Rndのdefaultプロパティに値を指定してあげると指定した箇所に表示することができます

例1 画面の真ん中にサブウィンドウを表示する

<Rnd
  default={{ 
    x: document.documentElement.clientWidth / 2, 
    y: document.documentElement.clientHeight / 2
  }}
>
  test
</Rnd>

例2 画面の右上に表示する

<Rnd
  default={{ 
    x: 0, 
    y: 0
  }}
>
  test
</Rnd>

おまけ

defaultプロパティにwidthとheightを指定すると、　サブウィンドウの初期表示時のサイズを調整できます。

例

<Rnd
  default={{ 
    x: 0, 
    y: 0,
    width: 200,
    height: 100
  }}
>
  test
</Rnd>

最後に

今回は、サブウィンドウの初期表示の設定方法について説明しました。

最後まで読んでよかったらLGTMお願いします！

まとめ記事 もあるのでよければこちらもみてください