How to print the entire page in react-to-print

Question

I have a print button that works great in react-to-print


     const handlePrint = useReactToPrint ({
         content: () => printRef.current,
     });

<div ref = {printRef}> this will print </div>

My question is how can I print the entire page and not just a single component?

score 1 · Accepted Answer · answered May 10 '21 at 10:52

1

You can use this same function to the parent component of the page.(Where all the code has written for the specific page to be print)

answered May 10 '21 at 10:52

Thank you very much, and if the button is inside a child component and I want to print all the components that are inside the parent? – R-S May 10 '21 at 11:02
You can create function in parent component and pass by props in child component and then in child component place that props on button's onClick. it will work.. Here I am sharing a link of example with code for better visibility of my answer.. – Muhammad Qasim Qadri May 11 '21 at 08:37
https://codesandbox.io/embed/infallible-fire-fcw5s?fontsize=14&hidenavigation=1&theme=dark – Muhammad Qasim Qadri May 11 '21 at 08:37
1

let me know, this links works for you or not? – Muhammad Qasim Qadri May 11 '21 at 08:37
Amazing! Thank you so much. The example is excellent. Arranged in a good way. Explained to me many things I had not settled with before – R-S May 11 '21 at 12:53

1 Answers1