DevDocsImageFrame Component

This is a React component that provides a full-screen image viewer functionality. It allows users to view an image in full-screen mode by clicking on it, and provides an option to exit the full-screen mode by clicking an "X" button or pressing the "Escape" key.

What does this MDX Component do?

The DevDocsImageFrame component renders an image within a container div. When the image is clicked, it enters full-screen mode, covering the entire screen. In full-screen mode, an "X" button is displayed in the top-right corner, which allows the user to exit the full-screen mode. Additionally, the component listens for the "Escape" key press event, and exits full-screen mode when the "Escape" key is pressed.

The component uses the useRef hook to access the DOM element representing the image, and the useEffect hook to set up and clean up the event listener for the "Escape" key press event.

Copy the Code into Your Components Folder

import React, { useState, useRef, useEffect } from "react";
import { cn } from "@site/src/utils";

const DevDocsImageFrame = (props) => {
  const [isFullScreen, setIsFullScreen] = useState(false);
  const imageRef = useRef(null);

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === "Escape") {
        exitFullScreen();
      }
    };

    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  const enterFullScreen = () => {
    if (imageRef.current) {
      if (imageRef.current.requestFullscreen) {
        imageRef.current.requestFullscreen();
      } else if (imageRef.current.webkitRequestFullscreen) {
        imageRef.current.webkitRequestFullscreen();
      } else if (imageRef.current.msRequestFullscreen) {
        imageRef.current.msRequestFullscreen();
      }
      setIsFullScreen(true);
    }
  };

  const exitFullScreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    setIsFullScreen(false);
  };

  const toggleFullScreen = () => {
    if (isFullScreen) {
      exitFullScreen();
    } else {
      enterFullScreen();
    }
  };

  return (
    <img
      ref={imageRef}
      {...props}
      onClick={toggleFullScreen}
      className={cn("w-full cursor-zoom-in", props.className)}
    />
  );
};

export { DevDocsImageFrame };

Npm Libraries and Install Instructions

This component does not require any additional npm libraries beyond the standard React library. It uses the cn utility function from the @site/src/utils module, which is likely a utility function provided by the project itself.

Use Component in your Markdown File

Why and How

The DevDocsImageFrame component provides a convenient way to display images with a full-screen viewing option, which can be useful for presenting detailed or high-resolution images in a user-friendly manner. By clicking on the image, the user can view it in full-screen mode, which can help them better observe the details or appreciate the image without any distractions.

The component achieves this functionality by using the Fullscreen API, which is a web standard for enabling web applications to display content in full-screen mode. However, different browsers may have different vendor-prefixed versions of the Fullscreen API, so the component checks for and uses the appropriate version for the current browser.

When the user clicks on the image, the toggleFullScreen function is called, which either enters or exits full-screen mode depending on the current state. The enterFullScreen function uses the appropriate Fullscreen API method to request full-screen mode for the image element. Similarly, the exitFullScreen function uses the appropriate method to exit full-screen mode.

Additionally, the component listens for the "Escape" key press event, which allows the user to exit full-screen mode by pressing the "Escape" key. This is achieved by setting up an event listener in the useEffect hook, which is cleaned up when the component is unmounted.

Overall, the DevDocsImageFrame component provides a user-friendly way to view images in full-screen mode, with a consistent experience across different browsers.