React-to-print: How to hidden content ComponentToPrint?

[tnduc]

<ReactToPrint
     trigger={() => <a href="#">Print this out!</a>}
     content={() => this.componentRef}
/>
<ComponentToPrint ref={el => (this.componentRef = el)} />

<ComponentToPrint ref={el => (this.componentRef = el)} /> display its content, I want to hide it, the user clicks Print this out! will show up on the printer page

[MatthewHerbst]

Hello. Can you please clarify exactly what you are trying to do? Not sure I understand from the above

[tnduc]

Hello. Can you please clarify exactly what you are trying to do? Not sure I understand from the above

ComponentToPrint component not show, when click Print this out! start printing. Sorry about the expression

[MatthewHerbst]

So, if I understand correctly: the area labelled "Hide" isn't printing when you click it. Can you post a link to the code please?

[tnduc]

So, if I understand correctly: the area labelled "Hide" isn't printing when you click it. Can you post a link to the code please?

Page only show Print this out!, When clicking on it, will print the content that I circled in red, meaning that the content in the normal red circle will not be displayed, but only displayed in the printed page, I am trying with @media print

[MatthewHerbst]

Alright - so what exactly is the problem?

[tnduc]

The content in component ComponentToPrint is always displayed, and I want it to be hidden, the problem is just that! You can look at your demo, and understand the problem.

[tnduc]

Perhaps your idea is to open a new tab, and print it from there, but I don't want to, I want to put the print button on a page with a lot of items, and when printing, just print the content in component ComponentToPrint, do you understand?

[MatthewHerbst]

The content in component ComponentToPrint is always displayed, and I want it to be hidden, the problem is just that! You can look at your demo, and understand the problem.

Ah, got it. Is the issue just that the @media print query isn't working, or is there a problem with this component? If the issue is just with @media print this might be better asked on StackOverflow - you'll get a lot more people with the ability to help there. I'm not an expert with @media queries :(

[TesterHa]

Hi all, I am having the same requirement of what tranducit95 is asking ? can anyone help me ?

[TesterHa]

@tranducit95 did you get the solution?
if yes ,can you please share with me?

Thanks,
naveen.n.d

[tnduc]

Use @media print or wrap with div and set display none 😂

[TesterHa]

haha thank you . I tried with display but without wrap into div ,now its
working perfect.

On Sun, Jun 2, 2019 at 6:14 PM TranDuc [e-mail] wrote:

Wrap with div and set display none 😂

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/gregnb/react-to-print/issues/83?email_source=notifications&email_token=AIQZ2HL2NSBDYQBELHR4JPDPYO6ERA5CNFSM4GMSCJXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWXU2NQ#issuecomment-498027830,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIQZ2HP5IBZEUOT2NQCEHLTPYO6ERANCNFSM4GMSCJXA
.

[TesterHa]

How to do with @media print ?

[tnduc]

You grasp the basic media query rule that is applicable.
https://www.tutorialspoint.com/css/css_printing.htm

[TesterHa]

thank you :)

On Sat, Jun 8, 2019, 14:09 TranDuc [e-mail] wrote:

You grasp the basic media query rule that is applicable.
https://www.tutorialspoint.com/css/css_printing.htm

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/gregnb/react-to-print/issues/83?email_source=notifications&email_token=AIQZ2HIITJPQUZGJ2GY5HLLPZNV5PA5CNFSM4GMSCJXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXHQRNA#issuecomment-500107444,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIQZ2HITI6HKRRFWOWOK4GDPZNV5PANCNFSM4GMSCJXA
.

[Gaibhne]

Google has this result pretty high up for what the original poster wanted, which I believe was to have a component that is visible when printing, but not visible while looking at the page in a web browser. I find the scattered comments above very confusing, but I ended up finding the solution from the inspiration they gave. For future googlers, this is how you do it:

In your app (from the example)

<ReactToPrint
  trigger={() => {
    return <a href="#">Print this out!</a>;
  }}
  content={() => this.componentRef}
/>
<ComponentToPrint ref={el => (this.componentRef = el)} />

In your ComponentToPrint:

export class ComponentToPrint extends React.PureComponent {
  render() {
    return (
      <div className='yourClassName'>
        ...your content...
      </table>
    );
  }
}

And wherever you put your CSS

@media screen {
    .yourClassName {
        visibility: hidden;
    }
}

The way it works is that @media screen does not get applied while printing, so the component is only hidden while being rendered in the browser.

[masiafrest]

i don't know is this is useful, but is you use material ui u can import box component and wrap what u want to print, and pass props displayPrint='block' to show on print screen