React image viewer library

Nutrient Web SDK’s React image viewer library enables you to render JPEG, PNG, and TIFF files directly in any modern browser or on any mobile device without requiring plugins. It provides an efficient way to embed a highly configurable image or document viewer with an intuitive user interface (UI) in any React-based web application.

Why build a custom React image viewer

While several image viewers exist, building a custom React image viewer offers greater flexibility and control over functionality and UI. A custom solution:

• Enables seamless integration with existing workflows.

• Ensures consistent end user experience that aligns with your branding.

• Enables optimizations for performance, accessibility, and advanced features such as annotations, collaborative tools, and unique navigation options.

Key capabilities

• Comprehensive file type support — Open TIFF, TIF (including multipage), PNG, JPEG, JPG, PDF, PDF/A (1, 2, 3, 4), Word, Excel, and PowerPoint files.

• Client-side document rendering — Render and process files entirely on the client without relying on a server.

• Customizable UI — Modify the interface by adding or hiding buttons and controls to match branding.

• Responsive design — Adapt the viewer to different screen sizes for optimal viewing on mobile or web browsers.

• Accessibility features — Ensure inclusive usability with compatibility for assistive technologies.

• Cross-browser compatibility — Functions seamlessly across all modern browsers and devices.

• Extendable features — Convert images to PDF to enable annotations, editing, and collaboration.

• Image navigation — Browse through multiple images.

• Zoom and pan — Examine image details using zoom and pan functionalities.

• Fullscreen mode — Improve the viewing experience with fullscreen support.

• Custom keyboard shortcuts — Enhance navigation with user-defined keyboard shortcuts.

Getting started

Integrate Nutrient Web SDK into your React project to begin using it. You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN), which Nutrient maintains for its customers. Using the CDN is a quick and easy way to get started.

1. Add the following <script> tag in your index.html file. Replace <version> with the most recent version of the SDK.

<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@<version>/nutrient-viewer.js"></script>

2. You can now use Nutrient Web SDK and reference window.NutrientViewer in your client-side code.

If you need more control and flexibility, consider using a local installation. For detailed instructions, refer to the getting started with React guide.

Loading image documents

To load an image file, call NutrientViewer.load() (formerly PSPDFKit.load()) and pass a blob, array buffer, or URL into the document option. Nutrient Web SDK will open the image as if it were a PDF document:

NutrientViewer.load({
  document: image
});

For more information on loading options, refer to the guides on importing a PDF document.

Annotating and exporting image documents

To annotate the loaded image, configure annotation tools and customize the UI to display only relevant options. When saving, extract the image data as needed. For detailed instructions, refer to the guide on adding annotations to images.

Adding custom keyboard shortcuts

Implement custom keyboard shortcuts by adding a keydown event listener in the capture phase to the Nutrient (PSPDFKit) instance. For step-by-step guidance, refer to the add custom keyboard shortcuts guide.

Adding zoom functionality

Nutrient Web SDK provides various UI elements and API helpers to manage zooming in and out of image documents, as well as to handle zooming automatically. End users can zoom in and out using the toolbar buttons (zoom-in and zoom-out) or keyboard shortcuts:

• Control/Command + + — Zoom in

• Control/Command + - — Zoom out

• Control/Command + 0 — Zoom to auto

• Control + Scroll wheel — Zoom in or out at mouse position

For more information on configuring zoom behavior using an API or disabling zoom for annotations, refer to the zoom options guide.

Adding fullscreen mode

Use the fullscreen API to implement fullscreen mode. The following example demonstrates an approach that works across multiple browsers:

function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}

requestFullscreen(nutrientContainer);

FAQs