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.
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> <RPPages /> </RPDefaultLayout> </RPProvider> </RPConfig> )}
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> <RPPages /> </RPDefaultLayout> </RPProvider> </RPConfig> )}