@pagus-kit/react

React components for rendering PPTX files in the browser, powered by @pagus-kit/core and @pagus-kit/renderer.

Part of the Pagus project.

Install

npm install @pagus-kit/react

Requires react >= 18 and react-dom >= 18 as peer dependencies.

Usage

Drop-in viewer

import { PptxViewer } from '@pagus-kit/react'

// Uncontrolled — shows a drag-and-drop upload zone
<PptxViewer />

// Controlled — pass file data directly
<PptxViewer
  file={arrayBuffer}
  page={1}
  scale={1}
  onLoad={({ slideCount }) => console.log(`${slideCount} slides`)}
  onError={(err) => console.error(err)}
  onPageChange={(page) => console.log(`Page ${page}`)}
/>

Props

interface PptxViewerProps {
  file?: ArrayBuffer | File | null
  page?: number                           // 1-based
  scale?: number                          // default 1
  className?: string
  style?: React.CSSProperties
  fontMap?: Record<string, FontMapping>   // custom font substitutions
  useGoogleFonts?: boolean                // default true
  useEmbeddedFonts?: boolean              // default true
  onLoad?: (info: { slideCount: number }) => void
  onError?: (error: Error) => void
  onPageChange?: (page: number) => void
  onFontsLoaded?: (info: { loaded: string[]; unresolved: string[] }) => void
}

Lower-level components and hooks

import { SlideView, usePresentation, useFonts } from '@pagus-kit/react'

// Parse a file
const { status, presentation, error } = usePresentation(file)

// Load fonts
const { status: fontStatus, fontSubstitutes } = useFonts(presentation?.fonts)

// Render a single slide
<SlideView
  slide={presentation.slides[0]}
  slideSize={presentation.slideSize}
  fontSubstitutes={fontSubstitutes}
/>

License

MIT