useRotationContext

The useRotationContext hook provides access to the rotation state and functions for rotating the currently loaded PDF file within the React PDF viewer.

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

Return Type

Name	Type	Description
rotate	number	Access the current rotation degree
setRotate	React.Dispatch<React.SetStateAction<number>>	Update the rotation degree

Usage

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

This example shows how to create a CustomRotationLayout component which uses useRotateContext to access the PDF page’s rotation degrees

JSX

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

const CustomRotationLayout = () => {
  // Consume from the controller provider
  const { rotate, setRotate } = useRotationContext()

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

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

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

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

TSX

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

const CustomRotationLayout: FC = () => {
  // Consume from the controller provider
  const { rotate, setRotate } = useRotationContext()

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

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

  return (
    <div>
      <button onClick={handleRotateClockwise}>Rotate Clockwise</button>
      <button onClick={handleRotateCounterclockwise}>Rotate Counterclockwise</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">
        <CustomRotationLayout />
        <RPDefaultLayout style={{ height: '660px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}