ArtPlayer/packages/artplayer-document/docs/en/Questions/Use with react portal.md

title, sidebar_position

title	sidebar_position
Use with React Portal	6

It is also very easy to use React Components in layers, contextmenu, controls. Handle more complex logic through ReactDOM.createPortal.

👉 Click to open an online demo

import React, { useState, useEffect } from "react";
import ReactDOM, { createPortal } from "react-dom";
import Artplayer from "artplayer/examples/react/Artplayer";

function Timer({ time }) {
  return <div>{time}</div>;
}

function App() {
  const [art, setArt] = useState(null);
  const [time, setTime] = useState(0);

  useEffect(() => {
    const update = () => setTime((time) => time + 1);
    setInterval(update, 1000);
  }, []);

  return (
    <div>
      <Artplayer
        option={{
          url: "https://artplayer.org/assets/sample/video.mp4",
          layers: [
            {
              html: "",
              name: "portal"
            }
          ],
          controls: [
            {
              position: "right",
              name: "portal",
              html: ""
            }
          ]
        }}
        style={{
          width: "600px",
          height: "400px",
          margin: "60px auto 0"
        }}
        getInstance={(art) => {
          art.on("ready", () => setArt(art));
        }}
      />
      {art ? createPortal(<Timer time={time} />, art.layers.portal) : null}
      {art ? createPortal(<Timer time={time} />, art.controls.portal) : null}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);