@tinyweb_dev/flipbuilder-react

React components and hooks for responsive, interactive PDF flipbooks. Includes page-turn gestures, single/spread layouts, zoom and pan, thumbnails, PDF outlines, fullscreen mode, and URL deep links.

Installation

pnpm add @tinyweb_dev/flipbuilder-react react react-dom

Quick start

This example uses Vite's ?url import for the PDF.js worker.

import { useMemo } from "react";
import {
  FlipBookViewer,
  usePdfDocument,
} from "@tinyweb_dev/flipbuilder-react";
import workerSrc from "pdfjs-dist/build/pdf.worker.min.mjs?url";

export function PdfFlipbook() {
  const options = useMemo(
    () => ({ src: "/documents/catalog.pdf", workerSrc }),
    [],
  );

  const { document, isLoading, error } = usePdfDocument(options);

  if (isLoading) return <p>Loading PDF…</p>;
  if (error) return <p>Unable to load PDF: {error.message}</p>;
  if (!document) return null;

  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <FlipBookViewer
        document={document}
        coverPage
        deepLink
        singleModeBreakpoint={640}
        flipSoundSrc={null}
      />
    </div>
  );
}

Give the viewer a concrete width and height. Its stable CSS class names can be themed by the consuming application.

Main exports

Components

• FlipBookViewer
• FlipBook
• PdfPage
• ThumbnailsPanel
• OutlinePanel

Hooks

• usePdfDocument
• useFlipEngine
• useZoomPan
• usePdfThumbnails
• usePdfOutline
• useFullscreen
• useHashPage

Core types, PdfDocument, and FlipEngine are re-exported for convenience.

See the project README for API options, styling guidance, and release instructions.

License

MIT