Creating a Custom Viewer with PrizmDoc’s ViewerCore and React
Disclaimer: This blog post assumes some familiarity with React and Node.js.
PrizmDoc's ViewerCore Library provides a powerful set of APIs that enables developers to implement their own custom document viewer. When combining the ViewerCore API with React, a developer can rapidly implement a highly performant custom viewer from scratch.
In this blog post, I will demonstrate how someone could integrate the ViewerCore API into their React application and begin using it to implement a custom viewer.
Step 1: Implementing a ViewerCore React Wrapper Component
This viewerCore React wrapper looks like this:
Let's walk through what we're doing step by step:
- First, we import the @prizmdoc/viewer-core node module.
- In our Component's render function, we create a single and assign a ref to it. You can read more about refs in the react documentation here.
- In our Component's componentDidMount lifecycle method, we initialize a new viewerControl object by passing it an options object (more details on this object later) and the ref that we set to our in the render function.
- Finally, we call a onViewerControlCreated function that was passed down via props with our newly created viewerControl object as a parameter. We do this last step so that the Parent Component of our ViewerCore wrapper can have access to the viewerControl object.
That's it! We now have a functioning ViewerCore wrapper that we can import into our React Viewer!
In the next step, I'll go into more detail on how to use our newly created ViewerCore React Component.
Step 2: Writing the Viewer Component
Now that we have a functional viewerCore React Component, we can use it in our main viewer component. Check out the code below for an example:
Let's break down what we're doing piece-by-piece:
- First, we import our newly created ViewerControl component that we created in the previous section. We also import a getLanguage helper function, but we'll go into more detail on this in a second.
- We use our new ViewerControl component within the Render function of our Viewer Component by rendering it conditionally based upon the existence of a 'viewingSessionId' prop. We do this because a viewingSessionId (also known as a documentID) is a required value for the viewerControl object to be intitialized. We don't want to even try to render our ViewerControl Component if this value hasn't been passed down properly or is still being fetched asynchronously.
- We pass an options object as a prop to our ViewerControl Component that contains the following three required values for viewerControl to initialize: 1. documentID, language, and imageHandler Url. The getLanguage helper function that we imported earlier would just be some function that returns a language object for viewerControl to consume. You can find out more about these properties by checking out the PrizmDoc Viewer documentation.
- We pass an onViewerControlCreated function as a prop to the ViewerControl Component. We do this so that our new Viewer Component has access to the viewerControl object that is created within the Child ViewerControl component. Once the Viewer Component has access to this object, it can then call the viewerControl API and/or pass the viewerControl object to any other child Component that may need to consume it.
- Finally, we write a search function and Search component that demonstrate how you can use the viewerControl API within your application. Let's say that the Search component accepts a prop called 'search' that corresponds to some function that the Search component invokes to do some 'searching' in your UI. The search function that we wrote in our Viewer Component simply uses the viewerControl APIs search to perform this functionality! You can read more about what other functionality viewerControl contains by checking out the PrizmDoc Viewer documentation.
Now that I've demonstrated how to incorporate viewercore within a React application, you can utilize it to develop a fully-featured react viewer. Thanks for your time and happy developing!
Charlie Davis joined Accusoft as a software engineer in the fall of 2015. Since then, he has been a member of the Support Engineering team, PrizmDoc team, and most recently is a contributor to the OnTask Development team. Throughout his career, Davis has been equally comfortable with developing new front-end UI features in React and developing new backend microservices. He is a graduate of the University of Miami where he obtained a B.S. in Computer Science and a B.A in English Literature. When he's not writing code, Charlie enjoys writing and performing music with his band Wallysburg, running, and spending time with his Shiba Inu (and honorary PrizmDoc mascot) Jackie.