Viewport

The main component of the SDK: the scrollable and zoomable area that renders the pages and handles direct interaction with them. Selection, text editing, form filling, link navigation, and the zoom and drag gestures all work inside it on their own; your UI around it drives the behavior through hooks.

Viewport takes no props. It is configured through PdfProviders, styled through the theme (see Theming and customization), and controlled through the viewport hooks, such as useViewportScale, useScrollToPage, and useCurrentPageId.

Behavior

• The viewport fills its parent element, so give the parent an explicit size.
• Render it only when the load state is 'ready': it throws DocumentNotLoadedError when no document is loaded, since there is nothing to show.
• What users may do inside is governed by the interaction mode. See useSetInteractionMode.
• The scale, the interaction mode, and the selection live in PdfProviders, so they survive remounting the viewport.
• Going to a search match with useDocumentSearch scrolls the match into view.
• The theme can add an overlay to each page and replace the widget overlay and preview: see the components field of PdfProviders.

Example

import { useViewportAutoFitScale, Viewport } from '@sdk-pdf/react'

function PdfApplication() {
  useViewportAutoFitScale('width')

  return (
    <div style={{ height: '100vh' }}>
      {/* Throws DocumentNotLoadedError when no document is loaded, since there is nothing
          to show. Render it only when the load state is 'ready'. */}
      <Viewport />
    </div>
  )
}