Version 3: How to Print Dynamic Content Without Rendering

[salememd]

Hi,

In previous version we were able to add dynamic content by simple create html element as following

const handlePrint = useReactToPrint({
    content: () => {
        return printComponent(ref.current?.cloneNode(true), true)
    }
});

export const printComponent = (html?: any, isTable: boolean = false): ReactInstance => {
    const PrintElem = document.createElement('div');
    PrintElem.className = isTable ? "table_printing_content" : "printing_content"
    const header =
        `<b>${((current.profile?.firstname?.value ?? "") + " " + (current.profile?.lastname?.value ?? "")).trim() + " (" + (current.username?.value ?? "") + " - " + (current.organization?.name?.value ?? "") + ")"}</b>` +
        `<br><b>${formatDate(new Date())}</b>` +
        `<br><b>${window.location.href}</b>`
    PrintElem.innerHTML = header;
    PrintElem.appendChild(html);
    return PrintElem
}

How can we do the same thing in the new version?

Thanks,

[MatthewHerbst]

Hello. It seems your existing code returns the element itself to the function, rather than the ref to the element.

You should be able to accomplish this same workflow by using lazy print content loading (example).

export const LazyContent = () => {
  const reactToPrintContent = () => {
    return printComponent(ref.current?.cloneNode(true), true);
  };

  const handlePrint = useReactToPrint({});

  return (
    <div>
      <button onClick={() => handlePrint(reactToPrintContent)}>
        Print
      </button>
    </div>
  );
};

Please let me know if this works for you.

Your existing code is honestly a bit strange (I would not expect to see document.createElement calls within React code). Is there a reason you are doing it this way instead of rendering the component as standard JSX?