useEmulateMediaPrint.tsx

import { useEffect } from "react";


function useEmulateMediaPrint() {
  useEffect(() => {
    const modifiedCSSRules: Map<CSSMediaRule, string> = new Map();

    for (const styleSheet of document.styleSheets) {
      for (const cssRule of styleSheet.cssRules) {
        if (cssRule instanceof CSSMediaRule) {
          const hasPrint = Array.from(cssRule.media).some(
            (media) => media === "print" || media === "not print",
          );

          if (hasPrint) {
            modifiedCSSRules.set(cssRule, cssRule.media.mediaText);
            cssRule.media.mediaText = cssRule.media.mediaText.replaceAll("print", "screen");
          }
        }
      }
    }

    return () => {
      for (const [cssRule, mediaText] of modifiedCSSRules) {
        cssRule.media.mediaText = mediaText;
      }
    };
  }, []);
}