Certain tools within the toolbar and the More Options menu expose a React Context API, enabling advanced control and customization. These APIs allow users to interact with and modify the behavior of specific tools directly from the parent component.

The methods are exposed through React’s hooks and can be accessed via a ref in the parent component. This setup allows users to dynamically trigger actions, such as adjusting zoom levels, toggling visibility, or navigating pages. For a detailed list of available configuration options, refer to the Hooks documentation.

Add a Custom Button on the Toolbar

The toolbar accepts components, which means you have full flexibility to arrange, modify, or reorder its components however you like.

Example: Add a Button to Toolbar and Show the Document Properties

React PDF provides a useDocumentContext through its React Context API, enabling you to know what properties a PDF file currently has.

Here is a simple button example that will help you place a button on your toolbar. When you click on the button, it will show the Document properties.

import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages,
  SearchTool,
  PreviousPageTool,
  InputPageTool,
  NextPageTool,
  ThumbnailTool,
  useDocumentContext
} from '@pdf-viewer/react'

const DocumentPropertiesButton = () => {
  const { pdfProperties } = useDocumentContext()

  return (
    <div style={{ marginInline: '8px' }}>
      <button onClick={() => alert(`${JSON.stringify(pdfProperties, null, 2)}`)}>
        Alert Document properties
      </button>
    </div>
  )
}

const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider
        src={'https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf'}
      >
        <RPLayout
          toolbar={{
            topbar: {
              component: (
                <>
                  <SearchTool />
                  <PreviousPageTool />
                  <InputPageTool />
                  <NextPageTool />
                  <DocumentPropertiesButton />
                </>
              )
            },
            leftSidebar: {
              component: <ThumbnailTool />
            }
          }}
        >
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  )
}

export default AppPdfViewer

---

Add a Custom Button in a Parent Component

With the Context API, you can invoke key features like rotating pages, zooming, or navigating through the document without relying solely on the viewer’s built-in UI. This approach is particularly useful for users who need to customize specific designs or meet unique usability requirements.

Example: Add an External Button to Rotate PDF

React PDF provides a useRotationContext hook, enabling you to control page rotation from outside the viewer. This flexibility allows you to integrate rotation controls into custom buttons or external components, making the viewer adaptable to your application’s needs.

JSX

import {
  useRotationContext,
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages
} from "@pdf-viewer/react";

const CustomRotationLayout = () => {
  // Access the rotation control from the context
  const { rotate, setRotate } = useRotationContext();

  // Rotate 90 degrees in a clockwise direction
  const handleRotateClockwise = () => {
    setRotate((prev) => (prev + 90) % 360);
  };

  // Rotate 90 degrees in a counterclockwise direction
  const handleRotateCounterclockwise = () => {
    setRotate((prev) => (prev - 90 + 360) % 360);
  };

  return (
    <div>
      {rotate} degrees
      <br />
      <button onClick={handleRotateClockwise}>Rotate Clockwise</button>
      <br />
      <button onClick={handleRotateCounterclockwise}>
        Rotate Counterclockwise
      </button>
    </div>
  );
};

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomRotationLayout/>
        <RPLayout
          style={{ width: "100%", height: "550px" }}
        >
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  );
};

TSX

import {
  useRotationContext,
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages
} from "@pdf-viewer/react";
import { type FC } from "react";

const CustomRotationLayout: FC = () => {
  // Access the rotation control from the context
  const { rotate, setRotate } = useRotationContext();

  // Rotate 90 degrees in a clockwise direction
  const handleRotateClockwise = () => {
    setRotate((prev) => (prev + 90) % 360);
  };

  // Rotate 90 degrees in a counterclockwise direction
  const handleRotateCounterclockwise = () => {
    setRotate((prev) => (prev - 90 + 360) % 360);
  };

  return (
     <div>
      {rotate} degrees
      <br />
      <button onClick={handleRotateClockwise}>Rotate Clockwise</button>
      <br />
      <button onClick={handleRotateCounterclockwise}>
        Rotate Counterclockwise
      </button>
    </div>
  );
};

export const AppPdfViewer : FC = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomRotationLayout/>
        <RPLayout
          style={{ width: "100%", height: "550px" }}
        >
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  );
};

---