React コンポーネントをピクチャー・イン・ピクチャー・ウィンドウにマウントする

Google は、chrome 116 に documentPictureInPicture API を導入しました。

この記事では、最初にメイン アプリケーションにマウントすることなく、ピクチャー イン ピクチャー ウィンドウに単純な React コンポーネントをマウントする方法を検討します。

ステップ 1 — コンポーネント構造のセットアップ
2つのコンポーネントを作成します。 MainComponent.js と Counter.js。 MainComponent.js では、PIP ウィンドウで Counter.js コンポーネントを開くシンプルなボタンをセットアップしました。

MainComponent.js

import React from "react";

const MainComponent = () => {
 async function openPictureInPicture() {
  // 
 }

 return (
  <div>
   <div onClick={openPictureInPicture}>Open counter</div>
  </div>
 );
};

export default MainComponent;

Counter.js

import React, { useState, useEffect } from "react";
const Counter = () => {
 const [count, setCount] = useState(0);

 useEffect(() => {
  setCount(1);
 }, []);

 const addNumber = () => {
  setCount((prevCount) => prevCount + 1);
 };
 const subtractNumber = () => {
  setCount((prevCount) => prevCount - 1);
 };

 try {
  return (
   <div>
    <div onClick={subtractNumber}>-</div>
    <button>{count}</button>
    <div onClick={addNumber}>+</div>
   </div>
  );
 } catch (error) {
  console.error("ERROR_CODE: _RENDER\n", error);
  return <></>;
 }
};

export default Counter;

ステップ 2 — ピクチャーインピクチャー機能を追加します
openPictureInPicture() 関数では、ピクチャー・イン・ピクチャー・ウィンドウを要求します。

const pipWindow = await window.documentPictureInPicture.requestWindow();

pip ウィンドウの本体に div 要素を作成します。この div に Counter.js
をマウントします。

const pipDiv = pipWindow.document.createElement("div");
pipDiv.setAttribute("id", "pip-root");
pipWindow.document.body.append(pipDiv);

ここで、Counter.js コンポーネントを ID「pip-root」の div にマウントします。

const PIP_ROOT = ReactDOM.createRoot(
        pipWindow.document.getElementById("pip-root")
);
PIP_ROOT.render(<Counter />);

ステップ 3 — すべてを組み合わせる
最終的な MainComponent.js コードは次のようになります。

import React from "react";
import Counter from "./Counter";
import ReactDOM from "react-dom/client";

const MainComponent = () => {
 async function openPictureInPicture() {
  const pipWindow = await window.documentPictureInPicture.requestWindow();
  const pipDiv = pipWindow.document.createElement("div");
  pipDiv.setAttribute("id", "pip-root");
  pipWindow.document.body.append(pipDiv);
  const PIP_ROOT = ReactDOM.createRoot(pipWindow.document.getElementById("pip-root"));
  PIP_ROOT.render(<Counter />);
 }

 return (
  <div>
   <div onClick={openPictureInPicture}>Open counter</div>
  </div>
 );
};

export default MainComponent;

これで、独自の React コンポーネントがピクチャーインピクチャーウィンドウにマウントされました!

以上がReact コンポーネントをピクチャー・イン・ピクチャー・ウィンドウにマウントするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。