Mind that it doesn't work in Firefox

[oliviertassinari]

mui/material-ui#17595

[audunru]

This seems to work in Firefox and Chrome:

import { useState, useEffect } from 'react';

export const usePrint = (): boolean => {
  const [isPrinting, setIsPrinting] = useState(false);

  useEffect(() => {
    const handleBeforePrint = (): void => setIsPrinting(true);
    const handleAfterPrint = (): void => setIsPrinting(false);

    window.addEventListener('beforeprint', handleBeforePrint);
    window.addEventListener('afterprint', handleAfterPrint);

    return (): void => {
      window.removeEventListener('beforeprint', handleBeforePrint);
      window.removeEventListener('afterprint', handleAfterPrint);
    };
  }, []);

  return isPrinting;
};

This works in Chrome, but not in Firefox:

export const usePrintMatchMedia = (): boolean => {
  const [isPrinting, setIsPrinting] = useState(false);

  useEffect(() => {
    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {
      setIsPrinting(event.matches);
    };

    const mediaQuery = window.matchMedia('print');
    // iOS <=13 has no support forfor addEventListener/removeEventListener on MediaQueryList,
    // but supports addListener
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handleMediaQueryEvent);
    } else if (mediaQuery.addListener) {
      mediaQuery.addListener(handleMediaQueryEvent);
    }

    // Trigger on initial render
    setIsPrinting(mediaQuery.matches);

    return (): void => {
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', handleMediaQueryEvent);
      } else if (mediaQuery.removeListener) {
        mediaQuery.removeListener(handleMediaQueryEvent);
      }
    };
  }, []);

  return isPrinting;
};

Using beforeprint/afterprint, the layout visibly changes in the main browser window if you use this to adjust it. Using mediaqueries, it only changes in the print preview (but again, only in Chrome).