Add buttons to each page for rotating the target page

Let's consider a situation where we allow users to rotate a particular page. Each page can have two buttons that rotate the page in different directions.

The `Viewer` component gives us the ability of adding custom components to each page via the `renderPage` property:

const renderPage: RenderPage = (props: RenderPageProps) => (
    // Our custom page renderer
);

<Viewer renderPage={renderPage} />;

Each page is constructed by different layers including the canvas, text and annotations. Following is the default renderer:

const defaultPageRenderer: RenderPage = (props: RenderPageProps) => (
    <>
        {props.canvasLayer.children}
        {props.textLayer.children}
        {props.annotationLayer.children}
    </>
);

We can add the rotating buttons to the right side of each page. Since each page has the relative position, the buttons can be placed inside a container which is positioned absolutely:

const renderPage: RenderPage = (props: RenderPageProps) => (
    <>
        {props.canvasLayer.children}
        <div
            style={{
                padding: '0.25rem',
                position: 'absolute',
                right: 0,
                top: 0,
                transform: 'translate(100%, 0)',
                zIndex: 1,
            }}
        >
            {/* Buttons go here */}
        </div>
        {props.annotationLayer.children}
        {props.textLayer.children}
    </>
);

The `translate(100%, 0)` transformation moves the container to the right side of the page, whereas the `zIndex: 1` style displays the buttons on top of the other layers. Otherwise, we can't click the buttons.

Now the buttons are located at the desired position. The next question is how we can rotate the associated page? Fortunately, the `RenderPageProps` property has the `onRotatePage` property that is what we want exactly.

It is a function that accepts only one parameter:

onRotatePage(direction: RotateDirection)

It becomes easy to handle the `onClick` event of our buttons:

<button onClick={() => props.onRotatePage(RotateDirection.Forward)}>
    Rotate clockwise
</button>
<button onClick={() => props.onRotatePage(RotateDirection.Backward)}>
    Rotate counterclockwise
</button>

It is up to you to use any components that wrap a `button`. The following examples use the `MinimalButton` and `Tooltip` components, all are provided by the `@react-pdf-viewer/core` package.

(The sample code)

Of course, rotating a page also reflects its corresponding thumbnail as you can see in the example below.

(The sample code)

There are more different approaches to provide the ability of rotating a single page. See the examples below for more details:

If you want to integrate the back-end when a single page is rotated, please take a look at the `onRotatePage` event.

Add buttons to each page for rotating the target page

See also