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 😄

[nikhils4]

Yeah sure @MatthewHerbst, would be glad to do that 💯

Done, #394

[15tanvir]

Hii ,

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!

Hi @nikhils4 can't we add a margin to the specific page only? As the above function added margin to all pages.

[MatthewHerbst]

@15tanvir you'd have to make a class to apply it to and have that class only wrap content on the first page

[15tanvir]

Actually the thing is that I want to apply @page property to only specific page, when the content get increase , it will automatically got break and append to the next page at that time only the @page margin property needs to get applied. On the other remaining pages it won't get applied. So I tried to write the @page in the particular class but it doesn't work.

…

On Sat, Jan 14, 2023 at 12:52 AM Matthew Herbst ***@***.***> wrote: @15tanvir <https://github.com/15tanvir> you'd have to make a class to apply it to and have that class only wrap content on the first page — Reply to this email directly, view it on GitHub <#29 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYZLXSIWPMOYKLOU3HLTDYLWSGTOLANCNFSM4FHTGV2Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- *Tanvir* *Sheikh* Software Trainee - M *+91 8888691390* E ***@***.*** ***@***.***>* -

[MatthewHerbst]

If you look at the docs, I think you want something like:

@page :first {
  /* Applies styles to the first page only */
}

[ngmtuandev]

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={""}
 />