PdfViewer — usage examples

PdfViewer ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { PdfViewer } from '@rozie-ui/pdf-react';

export function Demo() {
  const [page, setPage] = useState(1);
  return (
    <PdfViewer
      src="/document.pdf"
      page={page}
      onPageChange={(e) => setPage(e.page)}
      scale={1.2}
      render-all-pages
      onLoad={(e) => console.log(e.numPages)}
    />
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import PdfViewer from '@rozie-ui/pdf-vue';

const page = ref(1);
</script>

<template>
  <PdfViewer
    src="/document.pdf"
    v-model:page="page"
    :scale="1.2"
    render-all-pages
    @load="(e) => console.log(e.numPages)"
  />
</template>

svelte

<script lang="ts">
  import PdfViewer from '@rozie-ui/pdf-svelte';

  let page = $state(1);
</script>

<PdfViewer
  src="/document.pdf"
  bind:page
  scale={1.2}
  render-all-pages
  onload={(e) => console.log(e.numPages)}
/>

import { Component } from '@angular/core';
import { PdfViewer } from '@rozie-ui/pdf-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [PdfViewer],
  template: `
    <PdfViewer
      src="/document.pdf"
      [(page)]="page"
      [scale]="1.2"
      render-all-pages
      (load)="onLoad($event)"
    />
  `,
})
export class DemoComponent {
  page = 1;
  onLoad(e: any) { console.log(e.numPages); }
}

tsx

import { createSignal } from 'solid-js';
import { PdfViewer } from '@rozie-ui/pdf-solid';

export function Demo() {
  const [page, setPage] = createSignal(1);
  return (
    <PdfViewer
      src="/document.pdf"
      page={page()}
      onPageChange={(e) => setPage(e.page)}
      scale={1.2}
      render-all-pages
      onLoad={(e) => console.log(e.numPages)}
    />
  );
}

import '@rozie-ui/pdf-lit';

// <rozie-pdf-viewer> is a custom element. Bind `src`/`page` as properties and
// listen for `page-change` (the two-way change channel) + `load`.
const el = document.querySelector('rozie-pdf-viewer');
el.src = '/document.pdf';
el.scale = 1.2;
el.addEventListener('page-change', (e) => { el.page = e.detail.page; });
el.addEventListener('load', (e) => console.log(e.detail.numPages));

Imperative handle

Beyond props and events, PdfViewer exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { PdfViewer, type PdfViewerHandle } from '@rozie-ui/pdf-react';

const viewer = useRef<PdfViewerHandle>(null);
// <PdfViewer ref={viewer} ... />
viewer.current?.nextPage();
const total = viewer.current?.getPageCount();

vue

<script setup>
import { ref } from 'vue';
const viewer = ref();      // template ref
</script>

<template>
  <PdfViewer ref="viewer" ... />
  <button @click="viewer.nextPage()">Next</button>
</template>

svelte

<script>
  let viewer;              // component instance via bind:this
</script>

<PdfViewer bind:this={viewer} ... />
<button onclick={() => viewer.nextPage()}>Next</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(PdfViewer) viewer!: PdfViewer;  // or the viewChild() signal
  next() { this.viewer.nextPage(); }
  count() { return this.viewer.getPageCount(); }
}

tsx

import { PdfViewer, type PdfViewerHandle } from '@rozie-ui/pdf-solid';

let handle: PdfViewerHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<PdfViewer ref={(h) => (handle = h)} ... />;
handle?.nextPage();
const total = handle?.getPageCount();

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-pdf-viewer');
el.nextPage();
const total = el.getPageCount();

PdfViewer — usage examples ​

Usage ​

Imperative handle ​

See also ​

PdfViewer — usage examples

Usage

Imperative handle

See also