Skip to content
useElementPageContext Organization

The useElementPageContext hook provides a function to add custom elements to a PDF page.

It enables you to create custom elements such as a bounding box, a shape or an image for a specified page.

This is useful for labelling certain parts of a PDF page or displaying certain content dynamically.

NameTypeDescription
updateElement(pageNumber: number, element: (dimension: {width: number, height: number}, rotate: number) => HTMLElement | JSX.Element) => voidAdd a custom element to the specific page
removeElement(pageNumber: number, index: number) => voidRemove a custom element from the specific page
clearElements(pageNumber: number) => voidRemove all custom elements from the specific page
elementListRecord<number, Array<HTMLElement | JSX.Element>>Access the current scale level of the current PDF page

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

This example shows how to create a CustomElementPage component which uses useElementPageContext to handle the element page functionality.

import { useCallback, useState, useEffect } from 'react'
import {
RPConfig,
RPProvider,
RPDefaultLayout,
RPPages,
useElementPageContext
} from '@pdf-viewer/react'
const createHTMLElement = (id) => {
const div = document.createElement('div')
// set id to element
div.id = id
// setting style
div.style.backgroundColor = 'green'
div.style.width = '100px'
div.style.height = '100px'
div.style.color = 'white'
div.style.padding = '2px 4px'
div.style.borderRadius = '4px'
div.style.position = 'absolute'
// set position
const top = 10 + Number(id) * 10
div.style.top = top + 'px'
div.style.left = '0'
return div
}
// function to create react jsx element
const createJSXElement = (id, removeElement) => {
return (
<div
id={id}
style={{
backgroundColor: 'red',
width: '100px',
height: '100px',
color: 'white',
padding: '2px 4px',
borderRadius: '4px',
position: 'absolute',
// set position
top: '0px',
left: '50px',
zIndex: 10
}}
>
<button onClick={() => removeElement(1, 1)}>remove</button>
</div>
)
}
const CustomElement = () => {
const { updateElement, clearElements, removeElement } = useElementPageContext()
const [page, setPage] = useState(1)
useEffect(() => {
updateElement(1, () => {
return [
// HTML element
createHTMLElement('1'),
// JSX element
createJSXElement('2', removeElement)
]
})
return () => {
clearElements(1)
}
}, [clearElements, updateElement, removeElement])
const handleClear = useCallback(() => {
clearElements(page)
}, [page, clearElements])
const handleAdd = useCallback(() => {
updateElement(page, (prev = []) => {
console.log(prev)
return [
...prev,
// HTML element
createHTMLElement((prev.length + 1).toString())
]
})
}, [updateElement, page])
return (
<>
<input type="number" value={page} onChange={(e) => setPage(Number(e.target.value))} />
<button onClick={handleClear}>clear</button>
<button onClick={handleAdd}>add</button>
</>
)
}
export const AppPdfViewer = () => {
return (
<RPConfig licenseKey={YOUR_LICENSE_KEY}>
<RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
<CustomElement />
<RPDefaultLayout>
<RPPages />
</RPDefaultLayout>
</RPProvider>
</RPConfig>
)
}