Skip to content

Commit

Permalink
Added trick to add custom margin (#394)
Browse files Browse the repository at this point in the history
Co-authored-by: Nikhil Singh <[email protected]>
  • Loading branch information
nikhils4 and Nikhil Singh authored Jul 2, 2021
1 parent a191f64 commit e20b11a
Showing 1 changed file with 20 additions and 0 deletions.
20 changes: 20 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,26 @@ Unfortunately there is no standard browser API for interacting with the print di

## Helpful Style Tips

### Set custom margin to the page ([29](https://github.com/gregnb/react-to-print/issues/29))

To set custom margin to the page,

First, create a function to return the page margin,

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

Now, within the JSX call this function within the style tags,

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

PS: This style tag should be inside the component that is being passed in as the content ref.

### Set landscape printing ([240](https://github.com/gregnb/react-to-print/issues/240))

In the component that is passed in as the content ref, add the following:
Expand Down

0 comments on commit e20b11a

Please sign in to comment.