@cecee/document-flip-book

A high-performance document flipbook component based on React and Ant Design.

Features

• 📖 Smooth Flip Animation: Realistic book flipping effect using react-pageflip.
• 📄 PDF Support: Integrated PDF rendering with react-pdf.
• 🖼️ Image Support: Support for image-based pages.
• 🖨️ Print & Export: Support for printing and exporting to PDF/EPUB.
• 🎨 Customizable: Adjustable themes and covers.
• 📦 Dual Output: Supports both ESM and CJS formats.

Installation

npm install @cecee/document-flip-book
# or
pnpm add @cecee/document-flip-book
# or
yarn add @cecee/document-flip-book

Peer Dependencies

Make sure you have the following peer dependencies installed in your project:

npm install antd dayjs html2canvas jspdf lodash react react-dom react-pageflip react-pdf

Usage

DocumentFlipBook

import React from 'react';
import { DocumentFlipBook } from '@cecee/document-flip-book';

const App = () => {
  const documentInfo = {
    fd: 'doc-id',
    attachments: [
      { path: 'https://example.com/page1.pdf', acc17c_fd: '1' },
      { path: 'https://example.com/image1.jpg', acc17c_fd: '2' },
    ],
  };

  return (
    <div style={{ height: '800px' }}>
      <DocumentFlipBook 
        documentInfo={documentInfo}
        title="Sample Document"
      />
    </div>
  );
};

export default App;

PDF Worker Configuration

By default, the component looks for pdf.worker.min.js at the root of your application (/pdf.worker.min.js).

You can configure a custom worker source using the pdfWorkerSrc prop or by calling setupPdfWorker:

import { setupPdfWorker } from '@cecee/document-flip-book';

// Using a CDN
setupPdfWorker('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.worker.min.mjs');

// Or via prop
<DocumentFlipBook 
  pdfWorkerSrc="path/to/your/worker.js"
  ...
/>

License

ISC