@peeekpage/viewer

Embeddable document viewers for peeek.page. This package ships PeeekViewer, an animated 3D flipbook React component. It reads the preview manifest that the renderer writes to your bucket and renders the page images. No telemetry, no runtime dependencies.

Install

npm install @peeekpage/viewer

React 18+ is a peer dependency.

Usage

import { PeeekViewer } from '@peeekpage/viewer'
import '@peeekpage/viewer/styles.css'

export function Preview() {
  return (
    <PeeekViewer
      src="https://your-bucket.example.com/previews/doc-123/manifest.json"
      accentColor="#0362FC"
      layout="double"
      downloadUrl="https://your-bucket.example.com/originals/doc-123.pdf"
    />
  )
}

In-memory pages

When the host already holds the rendered page URLs (e.g. a live render it is polling itself), pass them via pages instead of src. No fetch happens, and the array can grow over time as a render streams in:

<PeeekViewer
  mode="coverflow"
  pages={pageUrls}            // string[] of presigned image URLs
  filename="report.pdf"
  mimeType="application/pdf"
/>

Props

| Prop | Type | Default | Notes | | --- | --- | --- | --- | | src | string | - | Manifest .json URL. Required unless pages is given. | | pages | string[] | - | In-memory page image URLs. When set, the viewer renders these directly and does not fetch src. URLs are sanitized like the manifest path. | | filename | string | - | Header filename for the pages path (coverflow). | | mimeType | string | - | Header type badge for the pages path (coverflow). | | mode | 'flip' \| 'coverflow' | 'flip' | flip is the 3D page-turn book; coverflow is a peeking 3D carousel with a header and thumbnail strip. | | logo | string | - | Logo image URL. | | logoLink | string | - | Logo link (http/https only). | | accentColor | string | #6E79D6 | Hex or rgb(). | | background | 'color' \| 'image' \| 'transparent' | 'color' | | | backgroundColor | string | - | Solid or gradient CSS. | | backgroundImage | string | - | Used when background='image'. | | layout | 'single' \| 'double' | 'double' | | | pageShadows | boolean | true | | | rtl | boolean | false | | | animateInteractions | boolean | true | | | skin | 'classic' \| 'minimal' | 'classic' | | | language | 'en' \| 'pt-BR' | 'en' | Tooltip language. | | autoTransition | boolean | false | | | autoTransitionInterval | number | 5000 | ms. | | navigationControls | boolean | true | Master toolbar toggle. | | fullscreen | boolean | true | | | arrows | boolean | true | | | navigationBar | boolean | true | | | pagesOverview | boolean | true | Thumbnails. | | downloadUrl | string | - | Shows a download button when set. | | pollInterval | number | 2000 | ms between WIP polls. | | className | string | - | Extra class on the root. |

coverflow mode honors logo/accentColor/background, fullscreen, arrows, pagesOverview (thumbnails), rtl, autoTransition/autoTransitionInterval, downloadUrl and language. The flip-only props (layout, pageShadows, navigationBar) are ignored in coverflow.

Security

All host-provided URLs (logo, logoLink, backgroundImage, downloadUrl, and every page URL in the manifest) are validated against an http/https allowlist before they reach the DOM. The component never injects raw HTML and makes no network calls beyond fetching the manifest and loading page images.