Let user define margin

[simonschllng]

A printer usually cannot print to the very edge of the paper. This library however sets the page margins to 0 here:

https://github.com/gregnb/react-to-print/blob/725e060ed02a6077420f5be2897990b60f9ee46a/src/index.js#L162

What is the reason for that? It causes my page to look ugly and cuts away some part of the text. Can we make this style optional or over-writable by a prop?

[codesignist]

As you might notice margin 0 removes the date/time from top.
https://github.com/gregnb/react-to-print/blob/725e060ed02a6077420f5be2897990b60f9ee46a/src/index.js#L160
Need an another solution.

[simonschllng]

For me this is more a hack than a solution. The browser adds those headings and should give the user a way to remove them. My browser (google chrome 67) offers this option:

Could you at least make this optional? Like if you set property pageStyle="@page { size: auto; margin: 25mm; } }" it gets overwritten, if not it takes the current default?

[gregnb]

@simonschllng Sorry for the delayed response. So you're proposing two different solutions:

1. Adding a prop called 'pageStyle' where a user can specify styles for the page itself
2. A prop to turn the default pageStyle off/on

If you want to submit a PR for solution 1 I would accept it. That way you can style it however you see fit. As pointed out it was added to remove the time, but I would be willing to allow users to override if it they really want to

[codesignist]

First option is more appropriate.

[gregnb]

Anyone want to take this work on up on the first option?

[gregnb]

I've taken care of this issue by adding a prop called pageStyle which you can then override everything and provide whatever styles you wish.

If you want nothing to be there simply:

 <ReactToPrint
    pageStyle={""}
 />

[NguyenTheSon]

pageStyle not working! I want custom margin top, bottom.

pageStyles={'@media print { body { -webkit-print-color-adjust: exact; } @page { size: A4; margin: 200mm !important }}'}

[MatthewHerbst]

@NguyenTheSon does it not work in general, or does it just not work with media/other queries?

[NguyenTheSon]

@MatthewHerbst all not working! can you help me!

[nikhils4]

@gregnb Any concrete solution, on how one can give page margins using @page CSS rule, while using react-to-print?

[nikhils4]

I got the solution for this,

As I was using React, so made a function to get the page margins and called the same inside style tag in the JSX, and it worked,

const getPageMargins = () => {
  return `@page { margin: ${marginTop} ${marginRight} ${marginBottom} ${marginLeft} !important; }`;
};

<style>{getPageMargins()}</style>

Hope it helps!

[MatthewHerbst]

@nikhils4 thanks for sharing! If you'd like, feel free to make a PR to add that to the CSS tricks section of the README! I'm happy to do that too if you'd like, but would love for you to take the git credit 😄