Add margin between pages

In the previous versions, it is not easy to increase the margin between pages. In order to do that, you probably modify the styles of each page, for example:

.rpv-core__inner-page {
    margin: 0.5rem;
}

However, the approach doesn't work well since it affects to other functionalities. Navigating between pages, clicking a bookmark or thumbnail might not bring users to the correct destination.

The `pageLayout` option that is available from v3.9.0 fixes all the issues. This example demonstrates how you can set margins between pages in an easy and convenient way.

The option provides different properties to modify the styles and dimensions of the page container. Let's start with the `transformSize` property.

transformSize?: ({ numPages: number; pageIndex: number; size: Rect }) => Rect;

It is a function that modifies the size of the page container. The `Rect` type above contains the `height` and `width` properties that represent the height and width of the page container, respectively. The function accepts the following parameters:

Property	Type	Description	From
`numPages`	`number`	The total number of pages	3.9.0
`pageIndex`	`number`	The current page	3.9.0
`size`	`Rect`	The dimension of current page	3.9.0

It becomes easy to add some spaces around each page by increasing the size of its container:

import { Viewer } from '@react-pdf-viewer/core';
import type { PageLayout } from '@react-pdf-viewer/core';

const pageLayout: PageLayout = {
    transformSize: ({ size }) => ({
        height: size.height + 30,
        width: size.width + 30,
    }),
};

<Viewer pageLayout={pageLayout} />;

As you can see, it adds `30px` between pages. However, there is a small issue that happens with the first page only. It is aligned at the top, and it seems that there is no space added to the top.

To fix that, you can use the `buildPageStyles` property.

buildPageStyles?: ({ numPages: number; pageIndex: number }) => React.CSSProperties;

It is a function returning the CSS properties that you want to add to the page container. To fix the issue above, we can center the page within its container by using a combination of some CSS flexbox styles:

const pageLayout: PageLayout = {
    buildPageStyles: () => ({
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'center',
    }),
    transformSize: ({ size }) => ({
        ...
    }),
};

The first page now has the top margin like other pages:

(The sample code)