Reactでいい感じの拡大サブウィンドウを実装する ① 入門編

Reactでいい感じのサブウィンドウを作れるパッケージを見つけたので紹介します。

今回使用するパッケージ : react-rnd
https://github.com/bokuweb/react-rnd

上記のパッケージを使うといい感じのウィンドウを作成できます。

使い方

プロジェクト作成

npx create-react-app my-app

パッケージのインストール

yarn add react-rnd

App.js　のファイルを以下の内容に変更

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

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => setIsOpen(true)}>サブウィンドウを開く</button>
        {isOpen ? (
          <Rnd
            style={{
              background: "#fff"
            }}
            default={{
              x: 0,
              y: 0,
              width: 320,
              height: 200
            }}
          >
            <button onClick={() => setIsOpen(false)}>
              サブウィンドウを閉じる
            </button>
          </Rnd>
        ) : (
          <></>
        )}
      </header>
    </div>
  );
}

export default App;

やってることは、サブウィンドウで表示したい内容をRndの中に書くだけです！
これだけでいい感じのサブウィンドウが作れるので、よかったら使ってみてください

次回は拡大縮小の方法を書いていきます

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