How to Prevent Component Splitting Across Pages in A4 Layout Using React and react-to-print?

Question

I am building a React application where I need to render content on A4-sized pages for printing. I’m using the react-to-print library to handle the printing functionality.

The issue I’m facing is that when a component (e.g., a block of text or an element) is too large to fit on the current page, it gets split across pages. Instead, I want the entire component to move to the next page if it doesn’t fit completely on the current one.

I’ve tried setting up the layout with @page CSS for A4 size and used overflow: hidden to manage content. However, react-to-print doesn't seem to support this behavior out of the box.

Is there any way to achieve this behavior with react-to-print or another library? Any advice on managing dynamic layouts for A4 pages in React would be greatly appreciated!

Here’s a snippet of the code I’ve tried:

import { useReactToPrint } from "react-to-print";
import React, { useRef } from "react";

const PrintableComponent = () => {
  const documentRef = useRef(null);

  const handlePrint = useReactToPrint({
    content: () => documentRef.current,
    documentTitle: "",
    onAfterPrint: () => console.log("Printed successfully!"),
    onBeforeGetContent: () => {
      console.log("Preparing content for print...");
    },
    onPrintError: (e) => console.error("Error during printing:", e),
  });

  return (
    <>
      <button onClick={handlePrint}>Print</button>
      <PrintableTemplate ref={documentRef} data={data} />
    </>
  );
};

The PrintableTemplate component includes a list of rows, where each row has text or elements. The issue is that rows split across pages during printing, and I’m trying to prevent that.