@s8fy/pptx-viewer-react

React adapter for @s8fy/pptx-viewer.

Install

pnpm add @s8fy/pptx-viewer @s8fy/pptx-viewer-react react react-dom

@s8fy/pptx-viewer is a direct installation because the application imports its stylesheet.

Peer dependencies: React and React DOM 18 or 19. The package declares Node.js 22.12+ and includes ESM/CJS entrypoints with TypeScript declarations.

Usage

import { useMemo, useRef } from 'react'
import { PptxViewer } from '@s8fy/pptx-viewer-react'
import type { PptxViewerRef } from '@s8fy/pptx-viewer-react'
import type { ViewerSource } from '@s8fy/pptx-viewer'
import '@s8fy/pptx-viewer/style.css'

export function App({ file }: { file: ArrayBuffer }) {
  const viewerRef = useRef<PptxViewerRef | null>(null)
  const source = useMemo<ViewerSource>(() => ({ kind: 'file', file }), [file])
  return (
    <PptxViewer
      ref={viewerRef}
      source={source}
      onLoad={({ total }) => console.log(`Loaded ${total} slides`)}
      onError={(error) => console.error(error)}
    />
  )
}

PptxViewer accepts the same ViewerOptions as the facade plus className and style. Its forwarded ref exposes the imperative Viewer controller. The adapter only handles React lifecycle, props, events, and refs; rendering is delegated to the universal viewer controller. Module import is SSR-safe, while mounting requires a browser DOM.

Sources, updates, and cleanup

• Obtain bytes with await file.arrayBuffer() or await response.arrayBuffer() before passing them as props. A browser File is not the source value.
• Use source={{ kind: 'presentation', presentation }} for a normalized model. Omit source for an empty viewer. Top-level file, fileName, and presentation props are rejected.
• Keep the source object stable between unrelated renders, as in useMemo above. A new source object triggers loading even if it contains the same bytes. Replace the source/model reference to apply changes; do not mutate model data in place.
• Source changes reuse the controller. Configuration changes or removing a source recreate it. Callback changes alone do not reset it. Unmount automatically destroys it; the forwarded ref is cleared when a controller is replaced or unmounted.

The ref becomes available after mounting; it does not mean the initial file is loaded. Use onLoad for readiness, or omit the source prop and await viewerRef.current.load(buffer) when using imperative loading. Catch rejections from methods such as toPdf() and downloadPdf(). Model-only sources have no original-file PDF/PPTX export capability.

Callbacks such as onSlideChange(index) use zero-based indices. React has no adapter-specific onReady prop; use the forwarded ref. Pass options directly, not through an options prop. Viewer parsing defaults to WASM; browser PDF export still requires WASM and Workers even if parsing uses JS.

In Next.js App Router, put the viewer in a client component ('use client'). Shared options, font configuration, methods, and error types are documented in the viewer README.

License

The default license is the PolyForm Noncommercial License. Commercial use requires a separate commercial license.