Why You Should Use a PDF Viewer Component in Your React App

While viewing PDFs might not be the most exciting problem that we get to tackle as developers, chances are that—eventually—you’ll need to include a PDF in your React application. When you do, there’s no easier way to handle it than the KendoReact PDF Viewer component.

Why Use a PDF Viewer Component Instead of the Browser PDF Viewer?

“But Kathryn,” you protest, “the browser will literally do that for me. Why should I bother with a PDF Viewer component when every modern browser has one built in? I have important things to do, like arguing about how GIF is pronounced and putting the new guy’s stapler in a jello mold.”

And look, you’re not wrong—technically, the browser does handle PDF viewing. But there are several good reasons why you should consider using a PDF Viewer component instead of just leaving it up to the default browser PDF viewer.

Controlling the User Flow

The browser PDF viewer will always open in a new tab, removing the user from the application flow. This is highly disruptive, and especially frustrating if the content of the PDF is informing their decisions and actions within the application. Now they have to do the whole toggle-back-and-forth thing, or try to get their windows tiled just right (so now they’re using your app with only half a screen), and let’s be honest—it’s just a pain.

Consistent UX

The UX changes from user to user, depending on which browser they’re using. On Chrome? The PDF viewing experience will be pretty different from someone on Safari. And that’s not even taking into account people on their mobile phones and tablets (who, by the way, are even more frustrated with the whole “open in a new tab” situation from the last scenario).

Allowing Customization

When you’re using the browser default viewer, you don’t have any control over how the user can interact with your PDF. Don’t want to offer a download option? Don’t need the search feature because it’s a diagram without selectable text? Too bad! When you use the default that the browser provides, you loose the ability to customize user interaction options and get stuck with, well … the default.

Consistent Design & Styling

The browser PDF viewer won’t match the look and feel of your application. You know what the browser PDF viewer matches? The browser styling. Boooooring. Presumably, someone put a lot of time and effort into creating custom branding and design styles for your application—why throw all that out the window? When you use a PDF Viewer component, you can insert it directly into your application and match the design system you’re already using.

An example of the PDF Viewer, customized to match a heavily styled application.

Event Management

When you’re using a PDF Viewer component, you gain the ability to hook into user actions. Need to track the number of downloads? Fire an event on page change? Keep an eye on errors? A good PDF Viewer component will expose those events, allowing you to easily handle file operations logic in your app.

The KendoReact PDF Viewer Component

“Okay, okay, you’ve convinced me! I’m ready to use a PDF Viewer component!” Good, now we can get on to the fun part!

This is also a very short part, because the Progress KendoReact PDF Viewer component is so simple to use, it almost feels silly to write a blog about it … almost.

<PDFViewerdata={SampleFileBase64}/>

Yep. That’s it. One line of code. 36 characters—and that’s really only because I used a longer name for my imported data.

Of course, if you want to customize the toolbar, apply your own styles, etc. you’ll add a few more characters to that … but, honestly, not very many.

Customizing the Toolbar

The KendoReact PDFViewer component includes 10 built-in tools that you can include (or not include): pager, spacer, zoomInOut, zoom, selection, spacer, search and open. The component will default to having all the tools included, but if you want to specify only a certain selection of them, just pass those directly into the tools prop.

<PDFViewer data={SampleFileBase64} tools={['pager','zoom']}/>

Using Events

The KendoReact PDF Viewer component also offers the following events that you can hook into:

• onLoad – Fires when a PDF document has been loaded.
• onError – Fires when an error occurs, for example, when the selected file cannot be read.
• onDownload – Fires when the download tool has been clicked. To prevent the download, return false.
• onPageChange – Fires when the page has changed.
• onRenderContent – Fires when the content component is about to be rendered.
• onZoom – Fires when the zoom level has changed.
• onRenderLoader – Fires when the loading indication component is about to be rendered.
• onRenderToolbar – Fires when the toolbar component is about to be rendered.

So, to make use of any of these, it’s as easy as this:

function myFunction() {
    console.log('Hello World');
  }

---

<PDFViewer data={SampleFileBase64} onPageChange={myFunction}/>

Ready to Try?

There you have it—a deep dive into the glamorous world of PDF viewing. It was more fun than you thought, right? Next time you need to include a PDF in your application, maybe think twice about just defaulting to the browser viewer—the difference between “blah” and “awesome, intuitive user experience” might be just a few more lines of code.

And, as always, if you aren’t already using the KendoReact library, you can try it out completely free for 30 days! Give it a shot, and see just how easy and fast it makes React application development.