A year and a half ago, PDFTron open-sourced our WebViewer UI, a React app for building world-class PDF and document experiences inside web apps. And today we’ve taken the natural next step towards providing customers unprecedented ability to tailor their UX by releasing a WebViewer React toolkit.

The React toolkit hooks into WebViewer, a powerful JavaScript PDF library, to bring developers the ability to snap together their very own document UI from React components accessing commercial-grade PDF editing and page manipulation features.

WebViewer React Toolkit Drag-and-drop-able icons

The new React components in action, enabling page manipulation via drag-and-drop-able icons

In this article, we present a complete inventory of the new React components and what they will let you do, along with instructions and samples on how to start building your very own document UI.

linkBackground

Due to its short learning curve, reusable components, and virtual DOM manipulation, React has earned an enthusiastic following, with over 70,000 React Github projects maintained by countless contributors.

Given React’s immense popularity, it was obvious that we should deepen our engagement with the technology, with our latest offerings focused on adding React components to let users manipulate pages as drag-and-drop-able icons.

linkWhen to use the WebViewer React Toolkit over WebViewer UI

Customers will find the open-source WebViewer UI suited to most projects; however, if you don’t need a sophisticated document UI and want to isolate one or more PDF processing functionalities available in the API -- like the ability to reorder pages, merge documents, and split documents -- then the React toolkit offers the ideal framework.

All React components are set up to support accessibility features, like keyboard-only navigation and selection. And we’ll be rolling out many more components in the near future to expand the range of document capabilities.

linkReact Toolkit Components

Click the links to access the Storybook documentation for each UI component -- including code samples and interactive demos.

  • Button - A versatile button component adaptable to various styles and sizes
  • ClickableDiv - A div that acts like a focusable button -- without appearing as a traditional button
  • DragLayer - An extensive library that enables a custom drag preview for any drag-and-drop container
  • Draggable - A React wrapper that allows you to have drag-and-drop-able div elements
  • EditableText - An editable text block that allows in-line editing of values
  • FileOrganizer - A file organizing feature that allows viewing of multiple page files and use of drag-and-drop to re-order them
  • FileSkeleton - A simple skeleton placeholder for files or pages
  • Image - An image handler with multiple parameters and placeholder functions
  • Spinner - Typical loading spinner icon to show non-specific progress
  • Thumbnail - A thumbnail representation of a file
  • ThumbnailDragLayer - A thumbnail drag preview
  • Toolbutton - A clickable button designed for small toolbars

linkGetting started

To get started with the WebViewer React toolkit, first install the npm package:

# Yarn
yarn add @pdftron/webviewer-react-toolkit

# npm
npm install @pdftron/webviewer-react-toolkit

Next, use the component library in your application to start integrating WebViewer functionality.

For example, here’s how the toolkit lets you build a UI to reorder and select pages within a PDF document, as seen within the FileOrganizer playground demo.

import {
  useManagedFiles,
  FileOrganizer,
  ThumbnailDragLayer,
  Thumbnail,
} from '@pdftron/webviewer-react-toolkit';

function YourComponent({ initialFiles }) {
  const {
    fileOrganizerProps,
    getThumbnailSelectionProps,
    draggingIds,
  } = useManagedFiles({ initialFiles });

  return (
    <FileOrganizer
      {...fileOrganizerProps}
      onRenderDragLayer={() => (
        <ThumbnailDragLayer numFiles={draggingIds.length} />
      )}
      onRenderThumbnail={({ id, onRenderThumbnailProps }) => (
        <Thumbnail
          {...getThumbnailSelectionProps(id)}
          {...onRenderThumbnailProps}
        />
      )}
    />
  );
}

The above example leveraged the following four toolkit components:

  1. The useManagedFiles hook in order to manage selection, drag-and-drop sorting, and drag-and-drop of multiple selected files at once.
  2. The FileOrganizer component to display a grid of items. To keep too many rendered items from slowing down performance, items are virtualized above a specified number.
  3. The ThumbnailDragLayer component to render out a custom icon when dragging items around within FileOrganizer
  4. The Thumbnail component to render each file as its own thumbnail within the FileOrganizer

linkCustomization

useManagedFiles and FileOrganizer have no inherent style; they are simply for formatting and organizing your components. However, the rest of the toolkit provides a variety of options to re-skin the UI.

Thumbnail and ThumbnailDragLayer are visual components, but entirely optional. You can add your own visual components with custom behaviors -- or simply change the style of any components provided by the toolkit. This can be done by using the exposed className props.

Alternatively, any of the base styles in the toolkit can be overridden by setting the value of CSS variables. For example, if you wanted to change the primary font color, you can do so by modifying the --color-font-primary variable within a custom CSS file.

For more on customizing the UI by overriding variables, check out the Color overriding and Variable overriding documentation.

linkUI:

  • React: The UI library that the toolkit is built with.
  • 🏷️ TypeScript: We chose TypeScript as the toolkit's language so that it integrates smoothly in both TypeScript and JavaScript projects, without the need for custom declarations or additional type packages.

linkDocumentation library:

  • 📖 Storybook: The system that we used to make the documentation. Storybook provides a central repository in which to explore React UI components and related documentation, code samples, and demos.

linkMore Components - Coming Soon

We’re just scratching the surface of what you’ll be able to accomplish with WebViewer and its new React components. Stay tuned for exciting new components and commercial PDF SDK capabilities!

We hope this article was helpful. If you have any questions or feedback, don’t hesitate to get in touch with us.