Content hidden by @media print does not show on the first click to print

[daniloab]

Hi, I have the follow context:

I want to print a report with a header, but this header needs just show on the print and not in the page on a web. So, I did this:

css

const PrintHeader = styled.div`
  display: none;
  width: 100%;
  padding: 20px;

  @media print {
    display: flex !important;
  }
`;

And use my PrintHeader component inside the wrapper from my report.

const DashboardReport = ({results}: Props) => {
  const componentRef = useRef(null);

  return (
    <Wrapper ref={el => (componentRef.current = el)}>
        <Flex width={[1]} justifyContent='flex-end' mb='5px'>
          <ReactToPrint
            trigger={() => (
              <button>
                Print
              </button>
            )}
            content={() => componentRef.current}
          />
        </Flex>

        <PrintHeader>
          <Flex width={[1]} flexDirection='column'>
            <h3>Report Header</h3>
          </Flex>
        </PrintHeader>
        <DashboardResults result={results} />
    </Wrapper>
  );
};

Our problem is:

• The page is rendered, I click to print my report but my PrintHeader does not show,
• So, I close the print and click again on the button. Now, my PrintHeader component load in the print.

The PrintHeader load dynamic data, could this be a problem with react to print?

[MatthewHerbst]

Hello. Yes, we have no way of knowing what data your component may or may not be loading, so we only wait 500ms before opening the window. There is talk in #140 about providing react-to-print the ability to wait until an action is done before trying to print. If you have any ideas for that thread they would be greatly appreciated.

Also, side note: the way you are using the useRef hook is incorrect. It should just be:

const componentRef = useRef(null);
<Wrapper ref={componentRef}>
  ...
</Wrapper>

[MatthewHerbst]

Hello. Please note that the newest version has support for using promises within onBeforePrint. You should be able to use that to achieve what you need reliably. Please let us know if you run into any issues, thank you.