# Viewport

Source: https://sdk.pdf.net/docs/v1/reference/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](https://sdk.pdf.net/docs/v1/reference/PdfProviders), styled through the theme (see [Theming and customization](https://sdk.pdf.net/docs/v1/guides/theming-and-customization)), and controlled through the viewport hooks, such as [useViewportScale](https://sdk.pdf.net/docs/v1/reference/useViewportScale), [useScrollToPage](https://sdk.pdf.net/docs/v1/reference/useScrollToPage), and [useCurrentPageId](https://sdk.pdf.net/docs/v1/reference/useCurrentPageId).

## Behavior [#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](https://sdk.pdf.net/docs/v1/reference/useSetInteractionMode).
* The scale, the interaction mode, and the selection live in [PdfProviders](https://sdk.pdf.net/docs/v1/reference/PdfProviders), so they survive remounting the viewport.
* Going to a search match with [useDocumentSearch](https://sdk.pdf.net/docs/v1/reference/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](https://sdk.pdf.net/docs/v1/reference/PdfProviders#components).

## Example [#example]

```tsx
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>
  )
}
```