Recommended way to use Webviewer WebComponent across multiple React routes

Technical Support WebViewer
,
1

WebViewer Version: 11.13.0

Do you have an issue with a specific file(s)? I am using it for DOCX files.
Can you reproduce using one of our samples or online demos? Not applicable.
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? React
Is your issue related to annotations? No

Please give a brief summary of your issue:
Recommended way to use Webviewer WebComponent across multiple React routes.

Please describe your issue and provide steps to reproduce it:
My application is using theWebviewer.Iframe in components on different React routes. Some routes use webviewer and some do not. I want to switch to using Webviewer.Webcomponent but I encounter issues.

  1. Is it possible to use Webviewer.Webcomponent in components on different React routes?
  2. What is the recommended way to use Webviewer.Webcomponent in components on different React routes?
3

Hello Luke,

Thank you for contacting WebViewer Forums.

If you’re looking to use WebViewer in different React routes, we recommend mounting WebViewer at a top level and reusing the instance for each route. That way you can avoid reinstantiating the web component every time.

Another way is to share the instance across components using React context. More information can be found here: Sharing WebViewer instance across components | Apryse documentation

Regards,
Luke

1 Like
4

Thank you! I had success pursuing this approach!

1 Like