useRotationContext
The useRotationContext
hook provides access to the rotation state and functions for rotating the currently loaded PDF file within the React PDF.
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
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> <RPPages /> </RPDefaultLayout> </RPProvider> </RPConfig> )}
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> <RPPages /> </RPDefaultLayout> </RPProvider> </RPConfig> )}