Embed React component in Web Viewer

Technical Support
1

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.

Screen Shot 2021-07-26 at 12.32.03 PM
Screen Shot 2021-07-26 at 12.32.03 PM1205Ɨ1076 174 KB

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

Link to document
N/A
Code snippet
N/A

2

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:

Guides:APIs:Forums:

3

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:

image

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>
    ),
    domNode.current
  );

}

I hope this helps!

Thanks,
Logan

4

Thanks for the help!

1 Like