Custom header in npm react-to-print

Question

I need to create a custom header that will be inserted at the beginning of each new page in my PDF export.

I tried many ways but none of them worked I also tried to find a way in the documentation : https://www.npmjs.com/package/react-to-print but I didn't find anything there either.

<h3 className="mt-1">Manual</h3>
   {manual.map((manualItem, manualIndex) => {
     return (
      <a
        key={manualIndex}
        className="hover custom-download"
         onClick={() =>
         handlePrintManual(manualItem)
        }
       >
         <i className="bx bxs-download"></i>{" "}
          {manualItem.header}
   </a>
  );
})}



const Manuals = React.useRef();

  const handlePrintManual = useReactToPrint({
    content: () => Manuals.current,
    documentTitle: `${manual.map((manualItem) => manualItem.header)}.pdf`,
    copyStyles: true,
  });



  const ManualHeader = () => {
    return (
      <tr>
        <div className="center CenterHeader">
          <tr>
            <th className="CatalogSheetProductTitle">
              {manual.map((manualItem, manualIndex) => (
                <>{manualItem.header}</>
              ))}
            </th>
          </tr>
          <th className="CatalogSheetTitle">
            <span className="sheetCatalogTitle">Instalační manual</span> <br />
            <span className="metel_logo_css">
              METEL<span className="metel_dot">.</span>EU
            </span>
          </th>
        </div>
      </tr>
    );
  };


<table
        ref={Manuals}
        style={{ color: "black" }}
        className="CatalogSheetTable"
      >
        <tbody>
          {ManualHeader()}
          {manual.map((manualItem, manualIndex) => (
            <tr key={manualIndex}>
              <td>{manualItem.text}</td>
            </tr>
          ))}
        </tbody>
      </table>

Answer 1

I solved a similar issue by including the header in every page and conditionally rendering it based on whether react-to-print was in a printing state or not:

// Define an "isPrinting" state using setState

const [isPrinting, setIsPrinting] = useState(false)

/* Then define a function for the onBeforeGetContent on onAfterPrint 
props in your print options: */

const handlePrintManual = useReactToPrint({
    content: () => Manuals.current,
    documentTitle: `${manual.map((manualItem) => manualItem.header)}.pdf`,
    copyStyles: true,
    onBeforeGetContent: () => {
      setIsPrinting(true)
      Promise.resolve()
    },
    onAfterPrint: () => setIsPrinting(false)
  });


/* Then you can just render your ManualsHeader component conditionally 
in each page/in the parent component(s) based upon whether the 
component is in a printing state or not: */

{ isPrinting && <ManualsHeader/> }