use-print-mode.ts 737 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 = () =>
  8. flushSync(() => {
  9. setIsPrinting(true);
  10. });
  11. const handleAfterPrint = () => {
  12. setIsPrinting(false);
  13. };
  14. window.addEventListener('beforeprint', handleBeforePrint);
  15. window.addEventListener('afterprint', handleAfterPrint);
  16. return () => {
  17. window.removeEventListener('beforeprint', handleBeforePrint);
  18. window.removeEventListener('afterprint', handleAfterPrint);
  19. };
  20. }, []);
  21. return isPrinting;
  22. };