Update webviewer initialDoc dynamically in React

Technical Support WebViewer
1

WebViewer Version: 10.11.1

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No

Please give a brief summary of your issue:
Sample code that demonstrates the use of React context?

Please describe your issue and provide steps to reproduce it:

I’ve tried a few times to set up a React app that will allow users to view and edit a set of PDF documents in series. Basic functionality is that there would be an app with previous/next buttons that would cause the webviewer component to reload with a new initialDoc.

I’ve been working from Sharing WebViewer instance across components (React-global-instance | Apryse Documentation) to get something up and running, but am not real familiar with React context and am not having any luck getting something up and running without multiple errors. Any chance there’s some sample React code that goes with this guide out there that would help me get a working version up and running?

Thanks!

2

Hello @bbc.underthebridge ,

Thank you for posting on our forum,

Is there a particular reason why you would like to reload the WebViewer with a new initial doc rather than just loading the new document into the current viewer?

Typically with this kind of use case we would recommend using our loadDocument() API to load a new document into the current viewer without having an increase in wait time for having to wait for the viewer to reinstantiate.

For example, if you have buttons with id’s “prevButton” and “nextButton” along with an array of URLs/files called “urlArr”, you could create something like the following:

Webviewer({
  path: '/lib',
  // ... other options
}, document.getElementById('viewer')).then(async (instance) => {
  let index = 0;

  // Assume existing array of urls/files named 'urlArr'
  instance.Core.documentViewer.loadDocument(urlArr[0]);

  document.getElementById('prevButton').addEventListener('click', async () => {
    if (index > 0) {
      instance.Core.documentViewer.loadDocument(urlArr[index]);
      index--;
    }
  });

  document.getElementById('nextButton').addEventListener('click', async () => {
    if (index < urlArr.length) {
      instance.Core.documentViewer.loadDocument(urlArr[index]);
      index++;
    }
  });
 
  // ... rest of code

Let me know if this works for your use case!
Alternatively, please provide more information regarding your desired workflow and we can investigate further.

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

3

Thanks Jacob. This is similar to the fix I worked out. My issue had to do with React context not working correctly in my app, so attempts to load a new PDF with

instance.Core.documentViewer.loadDocument()

were failing.

Thanks for the assist!

1 Like