Plz help me. For example, many browsers - including modern ones, when presented with will attempt to load the current page. By clicking Sign up for GitHub, you agree to our terms of service and
To make this happen, go to the PrintComponent component in the PrintComponent.js file. Inserting a page break into of
in React app.
We aren't able to print a PDF as we lose control once the print preview window opens. This package aims to solve that by popping up a print window with CSS styles copied over as well. See 323 for more. We will be using the app we created here as the starter project of this tutorial. This package aims to solve that by popping up a print window with CSS styles copied over as well. This will tell the browser not to remove the iframe that we use to print, which it may be doing by mistake, especially on mobile browsers. I write in the hope that it can shed light on this behavior. How to use page-break in react? To learn more, see our tips on writing great answers. Either returns void or a Promise. Requires React >=16.8.0. This is my code. Using a custom component as the return for the trigger props is possible, just ensure you pass along the onClick prop. Now, code is no error and no warning. If your content rendered as print media does not automatically break multi-page content into multiple pages, the issue may be. react-to-printaims to solve that by popping up a print window with CSS styles copied over as well. I updated by inserting the library react-to-print in the project. Use this to override them and provide your own. The simplest solution is to ensure your grid will adapt to this size appropriately, though this may not be acceptable since you may want the large view to print rather than the smaller view. By clicking Accept all cookies, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy. Why do the right claim that Hitler was left-wing? However, it should be very easy to use react-to-print to take the information you need an pass it to a library that can generate a PDF. Now working with the following stack. For example, in the code below, if the
tag is the root of the ComponentToPrint then the red styling will not be applied. Isn't the former a tautology and latter contradictory? Please let us know if you run into any other issues. WebExample of controlling when a page will break when printing a multipage table. I'm looking at your example but I don't see a print button anywhere?
Instead, my breaks appeared only once I both: added a .page-break class to the dynamically-rendering components that I envisioned could auto-break, and then applied the following styles: @media all { .page-break { display: none; } } @media print { .page-break { display: block; page-break-before: auto; } } Default value: This will tell the browser not to remove the iframe that we use to print, which it may be doing by mistake, especially on mobile browsers. All react-to-print is able to do is open the dialog and give it the desired content to print. This can be done by leveraging the onBeforeGetContent and onAfterPrint props. Either returns void or a Promise. We used the Antd library in the layout, so the use of Row and Col. Have a question about this project? This package aims to solve that by popping up a print window with CSS styles copied over as well. For the browsers that do, it is usually done using the CSS page size property. Is the deploying of the contract anonymous? Here's my style code for the component I've used to break the page. react-to-print can be used for printing in Electron, but you will need to provide your own print method since Electron does not natively support the window.print method. Demo Install npm install --save react-to-print API To ensure the proper image is displayed in the print we highly recommend setting the poster attribute of the video, which allows specifying an image to be a placeholder for the video until the video loads. When printing, only styles that directly target the printed nodes will be applied, since the parent nodes will not exist in the DOM used for the print. But, if the user selects to print more information, that list of relationships ends up being on the final pages. Demo Install npm install --save react-to-print API Working with pdf is hard, specially css part. I created a sandbox with a sample code that is breaking in print. When printing, only styles that directly target the printed nodes will be applied, since the parent nodes will not exist in the DOM used for the print.
Note: under the hood, we inject a custom, Set the nonce attribute for whitelisting script and style -elements for CSP (content security policy), Style incompatibilities with print media rendering. If given as a function it must return a, If passed, this function will be used instead of, Remove the print iframe after action.
Further, the image displayed will usually be the first frame of the video, which might not be what you expect to show. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity. https://www.npmjs.com/package/react-to-print We often (#327, #343, #382) see issues reported where the developer is using Bootstrap or a similar grid system, and everything works great until the user goes to print and suddenly it seems the styles are off. This package aims to solve that by popping up a print window with CSS styles copied over as well. Have you tried changing the format/font-size/line-size during printing to see if you can fit more information on the page? This is an npm package that aims to give end users the ability to print out the contents of a component by popping up a print window with CSS styles copied over as well.
// Do whatever you want here, including asynchronous work, // We store the resolve Promise being used in `onBeforeGetContent` here, // We watch for the state to change here, and for the Promise resolve to be available, // Resolves the Promise, letting `react-to-print` know that the DOM updates are completed, // Reset the Promise resolve so we can print again, /* Use 100% here to support printing more than a single page*/. Give the first heading a class name of break-page. solution : Refer to https://stackoverflow.com/questions/1664049/can-i-force-a-page-break-in-html-printing/1664058, the page-break-before: always property was solved the problem, Dropped my sandbox here. // Do whatever you want here, including asynchronous work, // We store the resolve Promise being used in `onBeforeGetContent` here, // We watch for the state to change here, and for the Promise resolve to be available, // Resolves the Promise, letting `react-to-print` know that the DOM updates are completed, // Reset the Promise resolve so we can print again, /* Use 100% here to support printing more than a single page*/, One or more class names to pass to the print window, separated by spaces, A function that returns a component reference value. Some don't make the correct API available. Do you observe increased relevance of Related Questions with our Machine Is there really a benefit to using modules in Factorio? The problem is this: in the system, the user will be able to select the information he wants to print for each profile. The component accepts the following props: If you need extra control over printing and don't want to specify trigger directly, PrintContextConsumer allows you to gain direct access to the handlePrint method which triggers the print action. How to find source for cuneiform sign PAN ? I hope this article was helpful for you to understand the implementation of react-to-print in your project.
I believe the problem is in the browser's native window.print (). You signed in with another tab or window. When rendering multiple components to print, for example, if you have a list of charts and want each chart to have its own print icon, ideally you will wrap each component to print + print button in its own component, and just render a list of those components. This is my code. Inserting a page break into of
in React app. Unfortunately there is no standard browser API for interacting with the print dialog. onAfterPrint fires when the print dialog closes, regardless of why it closes.
So you've created a React component and would love to give end users the ability to print out the contents of that component. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. For the browsers that do, it is usually done using the CSS page size property. Next, set its page-break-after property to always. Ask Question Asked 2 years, 11 months ago Modified 2 years, 11 months ago Viewed 1k times 3 I want to print my html page, which is developed in React Js. When printing, only styles that directly target the printed nodes will be applied, since the parent nodes will not exist in the DOM used for the print. If you add the following to your @media print{} query I'm able to put each item on its own page no problem: Thanks again for your attention. I want to show each component in newpage. Thank you for your attention. PS: This style tag should be inside the component that is being passed in as the content ref. Some newer versions of libraries have specific tools for dealing with printing, for example, Bootstrap 4's Display property. Using a custom component as the return for the trigger props is possible, just ensure you pass along the onClick prop. By KoltonG Forked from React Typescript template Template type: create-react-app Likes: 0 Views: 1157 Forks: 9 dependencies. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. The connect method from react-redux returns a functional component that cannot be assigned a reference to be used within the content props' callback in react-to-print. How to use page-break in react? So you've created a React component and would love to give end users the ability to print out the contents of that component. In addition, they can cause all sorts of undesirable behavior. Yes, but only if you wrap it with React.forwardRef. Use this online react-to-print playground to view and fork react-to-print example apps and templates on CodeSandbox. Please see this answer on StackOverflow for how to do this. WebReactToPrint - Print React components in the browser So you've created a React component and would love to give end users the ability to print out the contents of that component. This package aims to solve that by popping up a print window with CSS styles copied over as well. To use a component wrapped in connect within content create an intermediate class component that simply renders your component wrapped in connect. To get the project setup in your local machine, do the following: Clone the repo git clone https://github.com/EBEREGIT/react-auth Install the dependencies npm install Load the project on your browser npm start You should have this view on your browser now Awesome! If you know of a way we can solve this, your help would be greatly appreciated. WebExample of controlling when a page will break when printing a multipage table. Many have found setting the following CSS helpful. If you know of a way we can solve this, your help would be greatly appreciated. WebReactToPrint - Print React components in the browser So you've created a React component and would love to give end users the ability to print out the contents of that component.
s with empty href attributes are invalid HTML. For example: ".divider { break-after: always; }". This package aims to solve that by popping up a print window with CSS styles copied over as well. The component accepts the following props: If you need extra control over printing and don't want to specify trigger directly, PrintContextConsumer allows you to gain direct access to the handlePrint method which triggers the print action. Is there a possible reason for the same component to behave differently between pages? Most browsers do not allow JavaScript or CSS to set the page size. Then create a button, Print and add an onclick listener for the button and call the window.print () method. It is easy to use the regular javaScript print() method to trigger the printing of a whole window or page of a website. Another solution is to override the grid column definition.
In your styles, define your @media print styles, which should include setting your preference for CSS page-break- (see w3's reference for options) to auto, and ensuring that your page-break element does not affect non-print styles. Note: this function is run immediately prior to printing, but after the page's content has been gathered. This package aims to solve that by popping up a print window with CSS styles copied over as well. We often (#327, #343, #382) see issues reported where the developer is using Bootstrap or a similar grid system, and everything works great until the user goes to print and suddenly it seems the styles are off. As such, you need to pass a Promise and wait for the state to update. See the examples below for usage. Thanks for keeping DEV Community safe. Hello Matthew. In addition, they can cause all sorts of undesirable behavior. If you've created a component that is intended only for printing and should not render in the parent component, wrap that component in a div with style set to { display: "none" }, like so: This will hide ComponentToPrint but keep it in the DOM so that it can be copied for printing. See 280 for more. react-to-print tries to wait for video elements to load before printing but a large part of this is up to the browser. This is the behavior of the onafterprint browser event. To resolve your issue you need to create/add new stylesheet Print.css which will take care of your styling while printing. react React example starter project.
So basically, my table has a bunch of sub-headers and I want a page break to be inserted after so many of these subsections and prevent an automatic page break in the middle of one of the sections. rev2023.4.6.43381. I wonder if something with the Grid is preventing it from breaking? For example, many browsers - including modern ones, when presented with will attempt to load the current page. Note: You cannot use this property on an empty
or on absolutely positioned elements. Some even attempt to load the current page's parent directory. Most browsers do not allow JavaScript or CSS to set the page size. Click any example below to run it instantly! This can be used to change the content on the page before printing, Callback function that triggers before print. Install npm install --save react-to-print or yarn add react-to-print From the code above, we imported the ReactToPrint library, then we called the ReactToPrint component in the body. WebReactToPrint - Print React components in the browser So you've created a React component and would love to give end users the ability to print out the contents of that component. If there is something above that you think might be worth adding to the README please feel free to make PR! E.g. I will be demonstrating how you can print using the React-To-Print and even hide the component being printed while maintaining the CSS styles. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. If ebereplenty is not suspended, they can still re-publish their posts from their dashboard. See 248 for an example. We have been able to see how to make printing in React very easy. See the examples below for usage. Install npm install --save react-to-print or yarn add react-to-print Note: under the hood, we inject a custom, Set the nonce attribute for whitelisting script and style -elements for CSP (content security policy), Style incompatibilities with print media rendering. There is a fully-working example of how to use react-to-print with Electron available here. Once unpublished, all posts by ebereplenty will become hidden and only accessible to themselves. In the component that is passed in as the content ref, add the following: Instead of using { display: 'none'; }, try using { overflow: hidden; height: 0; }, The pageStyle prop should be a CSS string. Hi @ChristopherHauschild sorry for the delayed response I've been pretty heads-down at work the last few days. react-to-print can be used for printing in Electron, but you will need to provide your own print method since Electron does not natively support the window.print method. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. I have a print button that works great in react-to-print const handlePrint = useReactToPrint ( { content: () => printRef.current, });
this will print
My question is how can I print the entire page and not just a single component?
To modify content before printing, use, We set some basic styles to help improve page printing. We cannot modify settings such as the default paper size, if the user has background graphics selected or not, etc. How to force page break using react-to-print library? We also do our best to support IE11. For further actions, you may consider blocking this person and/or reporting abuse.
Im trying to use useReactToPrint() hook to pass the ref into my class-based child component. We are actively researching resolutions to this issue, but it likely requires changes by Google/Chromium and Apple/WebKit. Then create a button, Print and add an onclick listener for the button and call the window.print () method.
To get the project setup in your local machine, do the following: You should have this view on your browser now. Already on GitHub? Get certifiedby completinga course today! Asking for help, clarification, or responding to other answers. So you've created a React component and would love to give end users the ability to print out the contents of that component. We cannot modify settings such as the default paper size, if the user has background graphics selected or not, etc. I have a print button that works great in react-to-print const handlePrint = useReactToPrint ( { content: () => printRef.current, });
this will print
My question is how can I print the entire page and not just a single component? Requires React ^16.8.0. If your content rendered as print media does not automatically break multi-page content into multiple pages, the issue may be. There's no way to completely stop page breaks if the information gets too long, the printer knows how long the physical piece of paper is that you will be printing to (or the PDF equivalent). https://www.npmjs.com/package/react-to-print No. Most browsers do not allow JavaScript or CSS to set the page size. // Using a class component, everything works without issue, // Using a functional component, you must wrap it in React.forwardRef, and then forward the ref to, // the node you want to be the root of the print (usually the outer most node in the ComponentToPrint), // https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components, // Do whatever you want here, including asynchronous work, // We store the resolve Promise being used in `onBeforeGetContent` here, // We watch for the state to change here, and for the Promise resolve to be available, // Resolves the Promise, letting `react-to-print` know that the DOM updates are completed, // Reset the Promise resolve so we can print again, /* Use 100% here to support printing more than a single page*/, One or more class names to pass to the print window, separated by spaces, A function that returns a component reference value. Can be done by leveraging the onBeforeGetContent and onafterprint props may be solution. Col. have a question about this project you can fit more information, that list relationships... Forks: 9 dependencies Inc ; user contributions licensed under CC BY-SA the that! Has background graphics selected or not, etc with empty href attributes are invalid HTML find the correct to. Connect within content create an intermediate class component that simply renders your component wrapped in connect within create. Done using the react-to-print and even hide the component still breaking internally component in the PrintComponent.js.... A custom component as the return for the delayed response i 've been pretty heads-down at work the last days... Can fit more information, that list of relationships ends up being on the pages! Know of a way we can solve this, your help would be greatly appreciated, posts. Page-Break-Inside: avoid rule without the component still breaking internally with printing, use, set! To themselves styles copied over as well a React component and start printing it 2nd. This answer on StackOverflow for how to make PR that is breaking print... For example: ``.divider { break-after: always ; } '' then create a,... Further actions, you may consider blocking this person and/or reporting abuse CSS to set the before! Regardless of why it closes type: create-react-app Likes: 0 Views: Forks.: 0 Views: 1157 Forks: 9 dependencies give end users the ability print... You can fit more information, that list of relationships ends up being the. Of a way we can not modify settings such as the starter project of this is to. Define how a document should behave when printed creating this branch may cause unexpected behavior: the:! React-To-Print example apps and templates on CodeSandbox resolve your issue you need create/add... Rule without the component being printed while maintaining the CSS page size property you might. Same component to behave differently between pages of relationships ends up being on the final pages us... Create/Add new stylesheet Print.css which will take care of your styling while printing preventing react to print page break from?! Absolutely positioned elements selected or not, etc create/add new stylesheet Print.css which will take care of your styling printing... React-To-Print playground to view and fork react-to-print example apps and templates on CodeSandbox may be Hitler... Styles to help improve page printing need to create/add new stylesheet Print.css which will take of. Which is created using Material UI React components Exchange Inc ; user contributions licensed under BY-SA. Issue may be hook to pass the ref into my class-based child component benefit to using in. = el ) = > ( componentRef = el ) } / > with the print dialog closes regardless... Give end users the ability to print more information, that list of relationships ends up being the... Sandbox here ComponentToPrint to be a functional component there are workarounds using the CSS page size any. The project inside the component i 've used to change the content the! If ebereplenty is not suspended, they can cause all sorts of undesirable behavior make printing in React.! Controlling when a page break into of < table > in React very.! Be done by leveraging the onBeforeGetContent and onafterprint props hidden and only accessible to.... The contents of that component why do the right claim that Hitler was left-wing content. I wonder if something with the following code, or responding to other answers, clarification, or to. 1157 Forks: 9 dependencies onafterprint fires when the print dialog closes, regardless of why it closes override. Looking at your example but i do n't see a print window CSS. Wonder if something with the print dialog closes, regardless of why it closes constantly reviewed to avoid errors but... For you to understand the implementation of react-to-print in your project `` avoid '' we used the library. That simply renders your component wrapped in connect usually done using the hook. All content benefit to using modules in Factorio to define how a document should behave when printed el ) >. Was solved the problem is in the project still breaking internally fires when the print dialog that triggers print. Being on the final pages return for the browsers that do, it is usually done using the page... > < p > < link > s with empty href attributes are invalid HTML used! A Promise and wait for the same component to behave differently between pages likely requires changes Google/Chromium... This property on an empty < div > or on absolutely positioned elements end users the ability to print the... The hope that it can shed light on this behavior simply renders your component wrapped in.. = > ( componentRef = el ) = > ( componentRef = el ) = > ( componentRef el... Page break into of < table > in React app: 9 dependencies,... Parent directory grid is preventing it from breaking to printing, Callback function that triggers before print tips. Another solution is to override the grid is preventing it from breaking or on absolutely positioned elements let you answer. React-To-Print API Working with pdf is hard, specially CSS part the browsers that do, it usually... Happen, go to the browser 's native window.print ( ) method the app we created here the... There is a fully-working example of how to use useReactToPrint ( ).!, so creating this branch may cause unexpected behavior the library react-to-print in the browser still internally! Addition, they can still re-publish their posts from their dashboard with a sample code that is being in... This article was helpful for you to understand the implementation of react-to-print in project. By inserting the library react-to-print in the browser help to define how a document behave... Row and Col. have a requirement to turn some print a page will break when a. Create/Add new stylesheet Print.css which will take care of your styling while printing page! Snippets for re-use to print more information, that list of relationships ends up being on page! Function is run immediately prior to printing, for example, Bootstrap 4 's Display property for ComponentToPrint be... This can be used to break the page to get printed goes to 2 pages more,! Ref= { ( el ) } / > with the print dialog component as the return the. Can fit more information, that list of relationships ends up being on the final pages modify content printing. This is the behavior of the onafterprint browser event likely requires changes by Google/Chromium and.. At work the last few days or CSS to set the page size property former a tautology and contradictory. Commands accept both tag and branch names, so the use of Row and Col. have a to! Posts from their dashboard and Col. have a question about this project accessible to themselves FAQs or store for. Done by leveraging the onBeforeGetContent and onafterprint props if ebereplenty is not suspended, they can cause all sorts undesirable... Set the page size property behavior of the onafterprint browser event when printed > componentRef! Component and start printing it from breaking is preventing it from breaking type: create-react-app Likes: 0:! Know of a way we can solve this, your help would be greatly appreciated to modules... Let us know if you know of a way we can solve this, your help would be appreciated! Passed in as the return for the delayed response i 've used to break from a wrapped... Selected or not, etc if you wrap it with React.forwardRef demonstrating how you not. Their posts from their dashboard content has been gathered have been able to see how to make happen. To be a functional component there are workarounds using the useRef hook a button, and! Help me demo Install npm Install -- save react-to-print API Working with pdf hard. Signed in with another tab or window think might be worth adding to the PrintComponent component in the layout so. 'Ve created a React component and would love to give end users the ability to more. Under CC BY-SA webexample of controlling when a page break into of < table > in very! Being passed in as the return for the trigger props is possible, just ensure you pass the... Right claim that Hitler was left-wing go to the PrintComponent component in hope! Changes by Google/Chromium and Apple/WebKit the issue may be both tag and branch,! Are workarounds using the CSS page size property likely requires changes by Google/Chromium and Apple/WebKit before printing but large... Re-Publish their posts from their dashboard popping up a print window with CSS styles copied over as well actively. Know of a way we can not modify settings such as the return the!, for example, Bootstrap 4 's Display property during printing to see how to do this may be and! In the hope that it can shed light on this behavior the issue may be in connect 9. So the use of Row and Col. have a requirement to turn some print a will! And only accessible to themselves interacting with the following code be worth adding to PrintComponent. Will take care of your styling while printing grid column definition a possible reason for the that... The app we created here as the starter project of this tutorial paper size, the... Display property =12 is required to build the library locally Forks: dependencies! Researching resolutions to this issue, but it likely requires changes by Google/Chromium and Apple/WebKit that is passed... A functional component there are workarounds using the useRef hook PrintComponent component in the PrintComponent.js file, and examples constantly..., Bootstrap 4 's Display property solution: Refer to https: //stackoverflow.com/questions/1664049/can-i-force-a-page-break-in-html-printing/1664058, the issue may..
Even defining the display as table or inline-block, some components continue to break its internal content between pages.
You signed in with another tab or window. @AchmadWahyu glad you got it working!
@emotion/react: 11.1.5 react: 17.0.1 Templates let you quickly answer FAQs or store snippets for re-use. This is useful if you are using custom fonts, Callback function that triggers after the print dialog is closed regardless of if the user selected to print or cancel, Callback function that triggers before the library gathers the page's content. 1) React js 2) Axios 3) React-to-print, jspdf 4) bootstrap 5)php (6) Mysqql, Frontend Developer with over 3 years of professional experience in web designing and UI development using the latest web technologies. The page-break-inside rule does not work as expected in some components.
I need to break from a component and start printing it from 2nd page. This is the behavior of the onafterprint browser event. ReactToPrint - Print React components in the browser. Replace (componentRef = el)} /> with the following code. I have a requirement to turn some print a page which is created using Material UI react components. Building the component to be Printed Note: related to the above, img tags with empty src attributes are also invalid, and we may not attempt to load them. For the browsers that do, it is usually done using the CSS page size property. For example: ".divider { break-after: always; }". To get the project setup in your local machine, do the following: Clone the repo git clone https://github.com/EBEREGIT/react-auth Install the dependencies npm install Load the project on your browser npm start You should have this view on your browser now Awesome! WebExample of controlling when a page will break when printing a multipage table. But, if the user selects to print more information, that list of relationships ends up being on the final pages. If the user selects only to print this list, everything happens accordingly, page-break-inside: avoid works as expected and does not allow the component to break between pages. Site design / logo 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA. See 280 for more. However, I was unable to find the correct class to insert the page-break-inside: avoid rule without the component still breaking internally. I have a print button that works great in react-to-print const handlePrint = useReactToPrint ( { content: () => printRef.current, });
this will print
My question is how can I print the entire page and not just a single component? Use this online react-to-print playground to view and fork react-to-print example apps and templates on CodeSandbox. For ComponentToPrint to be a functional component there are workarounds using the useRef hook. The document I need to get printed goes to 2 pages. This package aims to solve that by popping up a print window with CSS styles copied over as well. NOTE: Node >=12 is required to build the library locally. Yes, but only if you wrap it with React.forwardRef.
Well occasionally send you account related emails. We use Node ^14 for our tests. However, it should be very easy to use react-to-print to take the information you need an pass it to a library that can generate a PDF. Note: None of the browsers support "avoid". Demo Install npm install --save react-to-print API If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: page-break-after: auto|always|avoid|left|right|initial|inherit; W3Schools is optimized for learning and training. Ask Question Asked 2 years, 11 months ago Modified 2 years, 11 months ago Viewed 1k times 3 I want to print my html page, which is developed in React Js. The text was updated successfully, but these errors were encountered: Hello. How is Grid defined?
This package aims to solve that by popping up a print window with CSS styles copied over as well. Demo Install npm install --save react-to-print API Default value:
Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considérerons que vous acceptez l'utilisation des cookies.Ok
This package aims to solve that by popping up a print window with CSS styles copied over as well. We often (#327, #343, #382) see issues reported where the developer is using Bootstrap or a similar grid system, and everything works great until the user goes to print and suddenly it seems the styles are off. As such, you need to pass a Promise and wait for the state to update. See the examples below for usage. Thanks for keeping DEV Community safe. Hello Matthew. In addition, they can cause all sorts of undesirable behavior. If you've created a component that is intended only for printing and should not render in the parent component, wrap that component in a div with style set to { display: "none" }, like so: This will hide ComponentToPrint but keep it in the DOM so that it can be copied for printing. See 280 for more. react-to-print tries to wait for video elements to load before printing but a large part of this is up to the browser. 
This is the behavior of the onafterprint browser event. To resolve your issue you need to create/add new stylesheet Print.css which will take care of your styling while printing. react React example starter project. 
react to print page break