use-print-mode.ts 728 B

12345678910111213141516171819202122232425262728
  1. import { useEffect, useState } from 'react';
  2. import { flushSync } from 'react-dom';
  3. export const usePrintMode = (): boolean => {
  4. const [isPrinting, setIsPrinting] = useState(false);
  5. useEffect(() => {
  6. // force re-render on beforeprint
  7. const handleBeforePrint = () => flushSync(() => {
  8. setIsPrinting(true);
  9. });
  10. const handleAfterPrint = () => {
  11. setIsPrinting(false);
  12. };
  13. window.addEventListener('beforeprint', handleBeforePrint);
  14. window.addEventListener('afterprint', handleAfterPrint);
  15. return () => {
  16. window.removeEventListener('beforeprint', handleBeforePrint);
  17. window.removeEventListener('afterprint', handleAfterPrint);
  18. };
  19. }, []);
  20. return isPrinting;
  21. };