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