Embed React component in Web Viewer

PDF.js Express Version

Detailed description of issue
Is it possible to embed my own React component within the web viewer?

Expected behaviour
I would like to incorporate this yellow banner across the web viewer.

Does your issue happen with every document, or just one?

Link to document
Code snippet

Hello, Iā€™m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:


Hey there!

You should be able to use React Portals to accomodate this use case.

To use React portals you need a DOM element you want to mount your component to. Since Express does not have one where you want it by default, we can create one like so:

    WebViewer({}).then(instance => {
       const ele = instance.iframeWindow.document.getElementsByClassName('HeaderToolsContainer')[0]

       const div = document.createElement('div');
       div.id = 'login-banner'
       div.style.height = '50px'

       ele.parentNode.insertBefore(div, ele.nextSibling)

This creates an element with the id login-banner inside the UI:


Now inside our React component, we can grab that element to mount our component:

function LoginBanner() {
   const domNode = useRef(instance.iframeWindow.document.getElementById('login-banner'))
  return ReactDOM.createPortal(
          <div>Please log in</div>


I hope this helps!


Thanks for the help!

1 Like