i new chrome browser iframe and svg d3 charts print is not working and crashing the website

[mohamedikram-qapita]

custom hook

import { useRef, useState } from 'react';
import { useReactToPrint, IReactToPrintProps } from 'react-to-print';

export const usePrint = (
  config: IReactToPrintProps = { content: () => null },
): [boolean, any, (() => void) | undefined] => {
  const [isPrinting, setIsPrinting] = useState<boolean>(false);

  const componentRef: any = useRef();

  const handlePrint = useReactToPrint({
    ...config,
    content: () => componentRef?.current,
    onBeforeGetContent: () => setIsPrinting(true),
    onBeforePrint: () => setIsPrinting(false),
  });

  return [isPrinting, componentRef, handlePrint];
};

in the component im calling as

const [isPrinting, componentRef, handlePrint] = usePrint({
    content: () => null,
  });

  const handlePrinter = () => {
    if (handlePrint) {
      handlePrint();
    }
  };

output i have attached image

[MatthewHerbst]

What errors are you getting? Also, calling the state methods in the callbacks will not work as expected. The state methods are asynchronous, and printing might happen before your state effects and/or re-renders happen.

[mohamedikram-qapita]

@MatthewHerbst i have made changes after going through examples still page is crashing.kindly check the video i have attached

const componentRef = React.useRef(null);
const reactToPrintContent = React.useCallback(() => {
  return componentRef.current;
}, [componentRef.current]);

const reactToPrintTrigger = React.useCallback(() => {
  return <button>Print using a Functional Component</button>;
}, []);

return (
  <ReactToPrint
    content={reactToPrintContent}
    documentTitle="AwesomeFileName"
    removeAfterPrint
    trigger={reactToPrintTrigger}
  />
  <CustomComponent ref={componentRef} />
)

https://user-images.githubusercontent.com/95607047/158347944-4d823637-c459-40de-a2dc-d6cb43abfda8.mp4

[MatthewHerbst]

Hello. Are you getting any errors in the developer console?

[mohamedikram-qapita]

no im not getting any error in developer console

https://user-images.githubusercontent.com/95607047/158520328-86228e25-5183-42fa-9c4e-96f1c5f64950.mp4

[MatthewHerbst]

Hmm, very strange. Any chance you could make a Codesandbox example of the error so I can debug?

[mohamedikram-qapita]

yeah sure i will try to add that things in code sand box

[MatthewHerbst]

Hello. Did you solve your problems?