why do we have two refs to the webviewer ?

[yty-agnitio]

Hi, thank you for this react demo.

I don't really understand why we have two refs to the viewer. One is in the WebViewer.js: <div ... ref={this.viewer} and another one is in App.js: <WebViewer ref={this.webviewer}...>. Shouldn't it be only one ref to the viewer in the "WebViewer.js"?

[justinjung04]

ref in WebViewer.js is referring to the actual DOM element, whereas in App.js it's the instance of WebViewer class that we created.

In this sample, App.js is trying to access some variables that are defined in WebViewer.js, so it's calling the getter functions like getInstance and getElement on the class instance.

[yty-agnitio]

Can’t we just have the following events inside the Webviewer.js

this.webviewer.current.getElement().addEventListener('ready', this.wvReadyHandler); this.webviewer.current.getElement().addEventListener('documentLoaded', this.wvDocumentLoadedHandler); So we have everything in one component.

But actually what I am trying to do, is to connect the PDFTron’s backend server by adding pdftronServer: 'http://localhost:8090/' to the options. But as a result, I am getting something wrong with rendering - the page renders itself recursively and looks really weird.

Do you know what can be wrong?

[yty-agnitio]

ok, so I managed to set up the PDFTron backend server. But still not really clear why not to have everything in the WebViewer.js

[justinjung04]

You can have everything in WebViewer.js. The sample was demonstrating how other components (one or more) could listen to events from WebViewer, but it's totally up to you :)

[yty-agnitio]

Oh, makes sense now. Thank you for the reply