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.
Return Type
Section titled “Return Type”Name | Type | Description |
---|---|---|
updateElement | (pageNumber: number, element: (dimension: {width: number, height: number}, rotate: number) => HTMLElement | JSX.Element) => void | Add a custom element to the specific page |
removeElement | (pageNumber: number, index: number) => void | Remove a custom element from the specific page |
clearElements | (pageNumber: number) => void | Remove all custom elements from the specific page |
elementList | Record<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> ) }
import { useCallback, useState, useEffect, FC } from 'react' import { RPConfig, RPProvider, RPDefaultLayout, RPPages, useElementPageContext } from '@pdf-viewer/react'
const createHTMLElement = (id: string) => { 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: string, removeElement: (page: number, index: number) => void) => { 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: FC = () => { 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> ) }