why do we have two refs to the webviewer ? about webviewer-react-sample

[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]

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?

[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