react-to-print

Because React state updates are asynchronous, you must return a Promise from onBeforePrint and resolve it only after the state update has completed. This ensures react-to-print waits for the DOM to reflect the new state before printing.

const [isPrinting, setIsPrinting] = useState(false);
const contentRef = useRef(null);
const promiseResolveRef = useRef(null);

useEffect(() => {
  if (isPrinting && promiseResolveRef.current) {
    promiseResolveRef.current();
  }
}, [isPrinting]);

const handlePrint = useReactToPrint({
  contentRef,
  onBeforePrint: () => {
    return new Promise((resolve) => {
      promiseResolveRef.current = resolve;
      setIsPrinting(true);
    });
  },
  onAfterPrint: () => {
    promiseResolveRef.current = null;
    setIsPrinting(false);
  }
});

Note for Class components: Pass the Promise resolve function to the this.setState callback: this.setState({ isPrinting: false }, resolve)

const [isPrinting, setIsPrinting] = useState(false);
const contentRef = useRef(null);

// We store the resolve Promise being used in `onBeforePrint` here
const promiseResolveRef = useRef(null);

// We watch for the state to change here, and for the Promise resolve to be available
useEffect(() => {
  if (isPrinting && promiseResolveRef.current) {
    // Resolves the Promise, letting `react-to-print` know that the DOM updates are completed
    promiseResolveRef.current();
  }
}, [isPrinting]);

const handlePrint = useReactToPrint({
  contentRef,
  onBeforePrint: () => {
    return new Promise((resolve) => {
      promiseResolveRef.current = resolve;
      setIsPrinting(true);
    });
  },
  onAfterPrint: () => {
    // Reset the Promise resolve so we can print again
    promiseResolveRef.current = null;
    setIsPrinting(false);
  }
});

Printing a container with overflow: scroll often results in truncated content or incorrect scroll positions. You can solve this using the print callback in useReactToPrint to manipulate the DOM of the print window directly.

Option 1: Using the print callback to sync scroll position

const customToPrint = (printWindow) => {
  const printContent = printWindow.contentDocument || printWindow.contentWindow?.document;
  const printedScrollContainer = printContent.querySelector('.scroll-container');
  const originScrollContainer = document.querySelector('.scroll-container');

  // Set the scroll position of the printed container to match the origin container
  printedScrollContainer.scrollTop = originScrollContainer.scrollTop;

  printWindow.contentWindow.print();
}

const handlePrint = useReactToPrint({
  // ...
  print: customToPrint,
});

Option 2: Simple CSS approach (Show all content) Apply these styles to the scrolling container to force it to expand to its full height during print:

@media print {
  .scroll-container {
    overflow: visible;
    height: fit-content;
  }
}

const customToPrint = (printWindow) => {
  const printContent = printWindow.contentDocument || printWindow.contentWindow?.document;
  const printedScrollContainer = printContent.querySelector('.scroll-container');

  const originScrollContainer = document.querySelector('.scroll-container');

  // Set the scroll position of the printed container to match the origin container
  printedScrollContainer.scrollTop = originScrollContainer.scrollTop;

  // You can also set the `overflow` and `height` properties of the printed container to show all content.
  // printedScrollContainer.style.overflow = "visible";
  // printedScrollContainer.style.height = "fit-content";

  printWindow.contentWindow.print();
}

const handlePrint = useReactToPrint({
  // ...
  print: customToPrint,
});

To control where pages break in dynamic lists, use a dedicated page-break element and CSS.

1. JSX Pattern:

<div className="print-container" style={{ margin: "0", padding: "0" }}>
  {listOfContent.map(yourContent => (
    <>
      <div className="page-break" />
      <div>{yourContent}</div>
    </>
  ))}
</div>

2. CSS Pattern:

@media all {
  .page-break {
    display: none;
  }
}

@media print {
  html, body {
    height: initial !important;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
  }
}

@media print {
  .page-break {
    margin-top: 1rem;
    display: block;
    page-break-before: auto;
  }
}

@page {
  size: auto;
  margin: 20mm;
}

Common Pitfalls:

• overflow: scroll will cause content to be cut off instead of breaking pages.
• position: absolute can cause reformatting or scaling issues.
• display: flex can interfere with page breaks; use display: block for print layouts.