Montage d'un composant React dans une image dans une fenêtre d'image

Google a introduit l'API documentPictureInPicture dans Chrome 116.

Dans cet article, nous explorons comment monter un composant de réaction simple dans l'image dans la fenêtre d'image sans avoir besoin de le monter au préalable sur notre application principale.

Étape 1 — Configurer la structure des composants
Nous fabriquons deux composants. MainComponent.js et Counter.js. Dans MainComponent.js, nous avons configuré un simple bouton qui ouvrira le composant Counter.js dans la fenêtre PIP.

MainComponent.js

import React from "react";

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

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

export default MainComponent;

Compteur.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;

Étape 2 — Ajouter la fonctionnalité image dans l'image
Dans la fonction openPictureInPicture(), nous demandons une image dans la fenêtre d'image.

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

Nous créons un élément div dans le corps de la fenêtre pip. Sur cette div nous monterons notre Counter.js

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

Maintenant, nous montons notre composant Counter.js sur le div avec l'identifiant « pip-root ».

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

Étape 3 — Combiner tout
Le code final de MainComponent.js devrait ressembler à ceci.

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;

Nous avons maintenant notre propre composant React monté sur une image dans une fenêtre panoramique !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!