The useViewModeContext hook provides access to the view mode state and functions for controlling the view mode of the currently loaded PDF file within React PDF.

It enables you to create custom view mode controls or other UI elements that can trigger the view mode of the PDF file.

Return Type

Name	Type	Description
columnCount	number	The number of columns in the view mode
viewMode	ViewMode	The current view mode
setDualPage	() => void	Set the view mode to dual page
setSinglePage	() => void	Set the view mode to single page

Usage

To ensure the view mode context can be accessed, you will need to use useViewModeContext inside a component which is a child of RPProvider.

This example shows how to create a CustomViewMode component which uses useViewModeContext to access the PDF page’s view mode

JSX

import React from "react";
import {
  RPConfig,
  RPProvider,
  RPDefaultLayout,
  RPPages,
  useViewModeContext,
} from "@pdf-viewer/react";

const CustomViewMode = () => {
  const { columnCount, viewMode, setDualPage, setSinglePage } =
    useViewModeContext();

  return (
    <div>
      <div>columnCount: {columnCount}</div>
      <div>viewMode: {viewMode}</div>
      <button onClick={setSinglePage}>single page</button>
      <button onClick={setDualPage}>dual page</button>
    </div>
  );
};

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey="YOUR_LICENSE_KEY">
      <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
        <CustomViewMode />
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  );
};

TSX

import React, { FC } from "react";
import {
  RPConfig,
  RPProvider,
  RPDefaultLayout,
  RPPages,
  useViewModeContext,
} from "@pdf-viewer/react";

const CustomViewMode: FC = () => {
  const { columnCount, viewMode, setDualPage, setSinglePage } =
    useViewModeContext();

  return (
    <div>
      <div>columnCount: {columnCount}</div>
      <div>viewMode: {viewMode}</div>
      <button onClick={setSinglePage}>single page</button>
      <button onClick={setDualPage}>dual page</button>
    </div>
  );
};

export const AppPdfViewer: FC = () => {
  return (
    <RPConfig licenseKey="YOUR_LICENSE_KEY">
      <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
        <CustomViewMode />
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  );
};