useFullScreenContext

The useFullScreenContext hook provides access to the full screen state and functions for entering and exiting full screen mode.

It enables you to create custom controls for toggling fullscreen mode in the PDF viewer by providing state and functions to manage fullscreen behavior.

Return Type

Name	Type	Description
isFullScreen	boolean	Indicate whether the element is currently in the fullscreen mode
toggleFullScreen	() => void	Toggle the fullscreen state for the specified element
isSupported	boolean	Indicate whether the browser supports the fullscreen mode

Usage

To ensure the full screen context can be accessed, you will need to use useFullScreenContext inside a component which is a child of RPProvider.

This example shows how to create a CustomFullScreenButton component which uses useFullScreenContext hook to handle fullscreen functionality.

JSX

import {
  RPConfig,
  RPTheme,
  RPProvider,
  RPDefaultLayout,
  RPPages,
  useFullScreenContext
} from '@pdf-viewer/react'

const CustomFullScreenButton = () => {
  const { isFullScreen, toggleFullScreen, isSupported } = useFullScreenContext()
  return (
    <div>
      <button onClick={toggleFullScreen} disabled={!isSupported}>
        {isFullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
      </button>
    </div>
  )
}

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomFullScreenButton />
        <RPDefaultLayout style={{ height: '660px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

TSX

import {
  RPConfig,
  RPTheme,
  RPProvider,
  RPDefaultLayout,
  RPPages,
  useFullScreenContext
} from '@pdf-viewer/react'
import { type FC } from 'react'

const CustomFullScreenButton: FC = () => {
  const { isFullScreen, toggleFullScreen, isSupported } = useFullScreenContext()
  return (
    <div>
      <button onClick={toggleFullScreen} disabled={!isSupported}>
        {isFullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
      </button>
    </div>
  )
}

export const AppPdfViewer: FC = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomFullScreenButton />
        <RPDefaultLayout style={{ height: '660px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}