Reactでいい感じのサブウィンドウを実装する ④ ウィンドウ動かす機能をON/OFF切り替える

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

Reactでいい感じのサブウィンドウを表示する際にウィンドウ動かす機能をON/OFF切り替えたい場面がよくあるので、

今回は、この方法について紹介します。

やり方

RndのdisableDraggingというプロパティに値を指定してあげるとON/OFFの切り替えがでできます。

例1 ウィンドウを動かす機能 ON　

<Rnd disableDragging={false}>test</Rnd>

※ デフォルトは　falseなので指定しなくても大丈夫です。

例2 ウィンドウを動かす機能 OFF

<Rnd disableDragging={true}>test</Rnd>

例3　サンプルGif

import "./App.css";
import React, { useState } from "react";
import { Rnd } from "react-rnd";

function App() {
  const [isDisableDragging, setDisableDragging] = useState(false);

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => setDisableDragging(!isDisableDragging)}>
          ウィンドウを動かす機能 {isDisableDragging ? "OFF" : "ON"}
        </button>
        <Rnd
          style={{
            backgroundColor: "#fff0d8"
          }}
          default={{
            x: 0,
            y: 0,
            width: 320,
            height: 200
          }}
          disableDragging={isDisableDragging}
        >
          <span
            style={{
              color: "#000f27"
            }}
          >
            {isDisableDragging ? "動きません" : "動きます"}
          </span>
        </Rnd>
      </header>
    </div>
  );
}

export default App;

最後に

プロパティを一つ指定するだけでウィンドウを動かす機能のON/OFFの切り替えができるようになりましたね

次は、ウィンドウの初期表示の設定方法
ついて紹介していきます。

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

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