react-3d-flipbook 1.1.1

package/dist/utils/pdfUtils.d.ts

@@ -0,0 +1,158 @@
+import type { FlipbookPage } from "../types";
+export interface FlipbookSizeOptions {
+    /** Maximum width constraint for the container (default: 1200) */
+    maxWidth?: number;
+    /** Maximum height constraint for the container (default: 900) */
+    maxHeight?: number;
+    /** Whether the flipbook is in single-page mode (default: false) */
+    singlePageMode?: boolean;
+}
+export interface FlipbookSize {
+    /** Calculated container width in pixels */
+    width: number;
+    /** Calculated container height in pixels */
+    height: number;
+    /** The aspect ratio of the container (width / height) */
+    aspectRatio: number;
+    /** Whether the page is landscape orientation */
+    isLandscape: boolean;
+}
+/**
+ * Calculate optimal flipbook container size based on page dimensions
+ *
+ * This function calculates the best container size that:
+ * - Maintains the PDF page aspect ratio
+ * - Fits within the specified max width/height constraints
+ * - Accounts for single-page vs two-page spread modes
+ *
+ * @param pageWidth - The PDF page width (in points or pixels)
+ * @param pageHeight - The PDF page height (in points or pixels)
+ * @param options - Sizing options
+ * @returns Calculated container dimensions
+ *
+ * @example
+ * ```typescript
+ * // Get first page info from PDF
+ * const pdfInfo = await getPdfInfo('document.pdf');
+ * const firstPage = pdfInfo.pageInfos[0];
+ *
+ * // Calculate optimal size for single-page mode
+ * const size = calculateFlipbookSize(firstPage.width, firstPage.height, {
+ *   singlePageMode: true,
+ *   maxWidth: 800,
+ *   maxHeight: 600,
+ * });
+ *
+ * // Use with Flipbook component
+ * <Flipbook pages={pages} width={size.width} height={size.height} singlePageMode />
+ * ```
+ */
+export declare function calculateFlipbookSize(pageWidth: number, pageHeight: number, options?: FlipbookSizeOptions): FlipbookSize;
+/**
+ * Calculate optimal flipbook size from a FlipbookPage array
+ * Uses the first page's dimensions for calculation
+ *
+ * @param pages - Array of FlipbookPage objects (must have at least one page with width/height)
+ * @param options - Sizing options
+ * @returns Calculated container dimensions, or null if pages don't have size info
+ *
+ * @example
+ * ```typescript
+ * const pages = await pdfToFlipbookPages('document.pdf');
+ * const size = calculateFlipbookSizeFromPages(pages, { singlePageMode: true });
+ *
+ * if (size) {
+ *   <Flipbook pages={pages} width={size.width} height={size.height} />
+ * }
+ * ```
+ */
+export declare function calculateFlipbookSizeFromPages(pages: FlipbookPage[], options?: FlipbookSizeOptions): FlipbookSize | null;
+/**
+ * Set the PDF.js worker source URL
+ * Must be called before using any PDF functions
+ *
+ * @example
+ * // For Vite
+ * import workerSrc from 'pdfjs-dist/build/pdf.worker.mjs?url';
+ * setPdfWorkerSrc(workerSrc);
+ *
+ * // For CDN
+ * setPdfWorkerSrc('https://unpkg.com/pdfjs-dist@4.0.379/build/pdf.worker.mjs');
+ */
+export declare function setPdfWorkerSrc(workerSrc: string): void;
+export interface PdfToImagesOptions {
+    /** Scale factor for rendering (default: 2 for high DPI) */
+    scale?: number;
+    /** Image format: 'png' or 'jpeg' (default: 'png') */
+    format?: "png" | "jpeg";
+    /** JPEG quality 0-1 (default: 0.92) */
+    quality?: number;
+    /** Callback for progress updates */
+    onProgress?: (current: number, total: number) => void;
+    /** Specific page numbers to render (1-indexed). If not provided, renders all pages */
+    pageNumbers?: number[];
+}
+export interface PdfPageInfo {
+    /** Page number (1-indexed) */
+    pageNumber: number;
+    /** Original PDF page width in points */
+    width: number;
+    /** Original PDF page height in points */
+    height: number;
+    /** Detected orientation */
+    orientation: "portrait" | "landscape";
+    /** Data URL of the rendered image */
+    dataUrl: string;
+}
+/**
+ * Load a PDF and convert pages to images
+ *
+ * @param source - PDF source: URL string, ArrayBuffer, or Uint8Array
+ * @param options - Conversion options
+ * @returns Promise resolving to array of FlipbookPage objects
+ *
+ * @example
+ * ```typescript
+ * import { pdfToFlipbookPages, setPdfWorkerSrc } from 'react-3d-flipbook/utils';
+ *
+ * // Set up worker first
+ * setPdfWorkerSrc('https://unpkg.com/pdfjs-dist@4.0.379/build/pdf.worker.mjs');
+ *
+ * // Convert PDF to flipbook pages
+ * const pages = await pdfToFlipbookPages('https://example.com/document.pdf', {
+ *   scale: 2,
+ *   onProgress: (current, total) => console.log(`Rendering page ${current}/${total}`)
+ * });
+ *
+ * // Use with Flipbook component
+ * <Flipbook pages={pages} width={800} height={600} />
+ * ```
+ */
+export declare function pdfToFlipbookPages(source: string | ArrayBuffer | Uint8Array, options?: PdfToImagesOptions): Promise<FlipbookPage[]>;
+/**
+ * Get PDF document info without rendering pages
+ */
+export declare function getPdfInfo(source: string | ArrayBuffer | Uint8Array): Promise<{
+    numPages: number;
+    pageInfos: Array<{
+        pageNumber: number;
+        width: number;
+        height: number;
+        orientation: "portrait" | "landscape";
+    }>;
+}>;
+/**
+ * Load PDF pages lazily (one at a time) for memory efficiency
+ * Returns an async generator that yields pages one by one
+ *
+ * @example
+ * ```typescript
+ * const pages: FlipbookPage[] = [];
+ * for await (const page of pdfToFlipbookPagesLazy(pdfUrl)) {
+ *   pages.push(page);
+ *   // Update UI progressively
+ *   setPages([...pages]);
+ * }
+ * ```
+ */
+export declare function pdfToFlipbookPagesLazy(source: string | ArrayBuffer | Uint8Array, options?: PdfToImagesOptions): AsyncGenerator<FlipbookPage, void, unknown>;

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "react-3d-flipbook",
+  "version": "1.1.1",
+  "description": "A modern React library for creating beautiful, interactive 3D flipbooks with realistic page-turning effects powered by WebGL and Three.js. Supports PDF loading, automatic page sizing, and customizable camera controls.",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "typecheck": "tsc --noEmit",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "version:patch": "npm version patch --no-git-tag-version",
+    "version:minor": "npm version minor --no-git-tag-version",
+    "version:major": "npm version major --no-git-tag-version",
+    "release:patch": "npm run version:patch && npm run release:tag",
+    "release:minor": "npm run version:minor && npm run release:tag",
+    "release:major": "npm run version:major && npm run release:tag",
+    "release:tag": "git add . && git commit -m \"chore(release): v$(node -p \"require('./package.json').version\")\" && git tag v$(node -p \"require('./package.json').version\") && git push origin HEAD --tags"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hdn-james/react-3d-flipbook.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hdn-james/react-3d-flipbook/issues"
+  },
+  "homepage": "https://github.com/hdn-james/react-3d-flipbook#readme",
+  "keywords": [
+    "react",
+    "flipbook",
+    "3d",
+    "webgl",
+    "page-flip",
+    "book",
+    "pdf",
+    "pdf-viewer",
+    "animation",
+    "three.js",
+    "threejs",
+    "page-turner",
+    "magazine",
+    "catalog",
+    "ebook",
+    "reader",
+    "typescript",
+    "react-component",
+    "page-curl",
+    "book-viewer"
+  ],
+  "author": "Dai-Nhan Huynh <huynhdainhan242@gmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "three": ">=0.150.0"
+  },
+  "peerDependenciesMeta": {
+    "pdfjs-dist": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
+    "pdfjs-dist": "^4.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-links": "^10.1.10",
+    "@storybook/react": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
+    "@testing-library/jest-dom": "^6.1.0",
+    "@testing-library/react": "^14.1.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/three": "^0.160.0",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.9.1",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^10.1.10",
+    "three": "^0.160.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}