useFullscreen

import { useFullscreen } from "rooks";

export default function App() {
  const { isFullscreenAvailable, isFullscreenEnabled, toggleFullscreen } =
    useFullscreen();

  if (!isFullscreenAvailable) {
    return <p>Fullscreen API is not available.</p>;
  }

  return (
    <button onClick={() => void toggleFullscreen()}>
      {isFullscreenEnabled ? "Exit fullscreen" : "Enter fullscreen"}
    </button>
  );
}

import { useRef, useState } from "react";
import { useFullscreen } from "rooks";

export default function App() {
  const panelRef = useRef<HTMLDivElement>(null);
  const [status, setStatus] = useState("Windowed");
  const { enableFullscreen, disableFullscreen, isFullscreenEnabled } =
    useFullscreen({
      target: panelRef,
      onChange: () => {
        setStatus(document.fullscreenElement ? "Fullscreen" : "Windowed");
      },
    });

  return (
    <div>
      <div ref={panelRef} style={{ padding: 24, border: "1px solid #999" }}>
        <p>Status: {status}</p>
        <button onClick={() => void enableFullscreen()}>Open panel</button>
        <button
          onClick={() => void disableFullscreen()}
          disabled={!isFullscreenEnabled}
        >
          Close panel
        </button>
      </div>
    </div>
  );
}