3d-pro-flipbook 1.0.2 → 1.2.0

package/README.md

@@ -15,15 +15,33 @@ A lightweight, professional, and responsive 3D PDF Flipbook library for the web.
 
 Install the package via NPM:
 
-```bash
+=================================
+#### 1. Installation
+
+First, add the library to your project via your package manager:Bash
+```
 npm install 3d-pro-flipbook
+```
+### or
 
-=================================
-1. InstallationFirst, add the library to your project via your package manager:Bashnpm install 3d-pro-flipbook
-# or
+```bash
 yarn add 3d-pro-flipbook
-2. The Universal "Golden Rule"No matter which framework you use, the logic is always the same:Import the class and the CSS.Create a container div with a unique ID (e.g., #my-book).Initialize the book inside your framework's "Mounted" lifecycle hook (this ensures the HTML exists before the code runs).3. Framework Examples⚛️ React / Next.jsSince this library interacts with the DOM (browser), you must use a Client Component and the useEffect hook.components/Flipbook.jsJavaScript'use client'; // Required for Next.js 13+
+```
+###
+#### 2. The Universal "Golden Rule"No matter which framework you use, the logic is always the same:
+Import the class and the CSS.
+Create a container div with a unique ID 
+
+(e.g., #my-book).Initialize the book inside your framework's "Mounted" lifecycle hook (this ensures the HTML exists before the code runs).
+
+#### 3. Framework Examples
+
+### ⚛️ React / Next.js
+Since this library interacts with the DOM (browser), you must use a Client Component and the useEffect hook. components/Flipbook.js
 
+'use client'; // Required for Next.js 13+
+
+```bash
 import { useEffect } from 'react';
 import { ProFlipbook } from '3d-pro-flipbook';
 import '3d-pro-flipbook/style.css'; // Import styles
@@ -32,15 +50,22 @@ export default function Flipbook({ pdfUrl }) {
   useEffect(() => {
     // Init inside useEffect to ensure DOM is ready
     new ProFlipbook('#my-book', pdfUrl, {
-      brandText: 'My React Book'
+      brandText: '3D Flip Book',
+      backgroundColor: '#333',
+      brandLogo: "https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no"
     });
   }, [pdfUrl]);
 
   return (
-    <div id="my-book" style={{ width: '100%', height: '100vh' }}></div>
+    <div id="my-book" style="width: 1200px; height: 80vh;"></div>
   );
 }
-🟢 Vue.js / NuxtUse the onMounted hook to initialize the library.HTML<script setup>
+```
+
+### 🟢 Vue.js / Nuxt: 
+Use the onMounted hook to initialize the library.HTML
+```bash
+<script setup>
 import { onMounted } from 'vue';
 import { ProFlipbook } from '3d-pro-flipbook';
 import '3d-pro-flipbook/style.css';
@@ -49,46 +74,71 @@ const pdfSource = '/book.pdf';
 
 onMounted(() => {
   new ProFlipbook('#vue-book', pdfSource, {
-    brandText: 'Vue Book',
-    backgroundColor: '#333'
+    brandText: '3D Flip Book',
+    backgroundColor: '#333',
+    brandLogo: "https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no"
   });
 });
 </script>
 
 <template>
-  <div id="vue-book" style="width: 100%; height: 100vh;"></div>
+  <div id="vue-book" style="width: 1200px; height: 80vh;"></div>
 </template>
-🔴 AngularInitialize the library inside the ngAfterViewInit lifecycle method.book.component.tsTypeScriptimport { Component, AfterViewInit } from '@angular/core';
+```
+
+### 🔴 Angular: 
+Initialize the library inside the ngAfterViewInit lifecycle method.book.component.ts
+TypeScript
+```bash
+import { Component, AfterViewInit } from '@angular/core';
 import { ProFlipbook } from '3d-pro-flipbook';
 // Ensure style.css is added to your angular.json styles array or imported in CSS
 
 @Component({
   selector: 'app-book',
-  template: '<div id="ng-book" style="width: 100%; height: 100vh;"></div>'
+  template: '<div id="ng-book" style="width: 1200px; height: 80vh;"></div>'
 })
 export class BookComponent implements AfterViewInit {
   ngAfterViewInit() {
     new ProFlipbook('#ng-book', 'assets/book.pdf', {
-      brandText: 'Angular Book'
+      brandText: '3D Flip Book',
+      backgroundColor: '#333',
+      brandLogo: "https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no"
     });
   }
 }
-🟠 Svelte / SvelteKitUse the onMount function.HTML<script>
+```
+
+### 🟠 Svelte / SvelteKit
+Use the onMount function.
+
+HTML
+```bash
+<script>
   import { onMount } from 'svelte';
   import { ProFlipbook } from '3d-pro-flipbook';
   import '3d-pro-flipbook/style.css';
 
   onMount(() => {
     new ProFlipbook('#svelte-book', '/book.pdf', {
-      brandText: 'Svelte Book'
+      brandText: '3D Flip Book',
+      backgroundColor: '#333',
+      brandLogo: "https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no"
     });
   });
 </script>
+<div id="svelte-book" style="width: 1200px; height: 80vh;"></div>
+```
 
-<div id="svelte-book" style="width: 100%; height: 100vh;"></div>
-🌐 Vanilla HTML (No Framework)If you aren't using a bundler, you can use the CDN links directly.HTML<link rel="stylesheet" href="https://unpkg.com/3d-pro-flipbook@latest/dist/style.css">
+### 🌐 Vanilla HTML (No Framework)
+If you aren't using a bundler, you can use the CDN links directly.
 
-<div id="book-container" style="width: 100%; height: 100vh;"></div>
+HTML
+
+```bash
+<link rel="stylesheet" href="https://unpkg.com/3d-pro-flipbook@latest/dist/style.css">
+
+<div id="book-container" style="width: 1200px; height: 80vh;"></div>
 
 <script src="https://unpkg.com/3d-pro-flipbook@latest/dist/pro-flipbook.umd.js"></script>
 
@@ -96,12 +146,36 @@ export class BookComponent implements AfterViewInit {
     // Access via the global object 'ProFlipbook.ProFlipbook'
     document.addEventListener('DOMContentLoaded', () => {
         new ProFlipbook.ProFlipbook('#book-container', 'book.pdf', {
-            brandText: "My HTML Book"
+            brandText: '3D Flip Book',
+            backgroundColor: '#333',
+            brandLogo: "https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no"
         });
     });
 </script>
-4. Configuration OptionsYou can pass an options object as the third argument.OptionTypeDefaultDescriptionbrandTextString"Pro Flipbook"The text shown on the loader and book spine.backgroundColorString"#333"The background color of the viewer area.workerUrlStringCDN Link(Advanced) Custom path to PDF.js worker.JavaScriptnew ProFlipbook('#id', 'file.pdf', {
-    brandText: "My Company",
-    backgroundColor: "#ff0000"
+```
+
+### Configuration Options:
+You can pass an options object as the third argument.
+
+```bash
+new ProFlipbook("#id", "file.pdf", {
+    brandText: "3D Flip Book", // This text shown on the loader and book last page
+    backgroundColor: "#333", // The background color of the viewer area
+    brandFontColor: "#fff", // The brand title color in last page
+    pageBackgroundColor: "#5f5e5e", // This will apply to last page background color
+    pageFontColor: "#ffffff", // This will apply to loading text
+    brandLogo: "https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no" // The logo will be used in generated last page for Odd count files
 });
-⚠️ Common Issues & Troubleshooting1. "Window is not defined" (Next.js / Nuxt / SSR)This happens because the library tries to access the browser window during Server Side Rendering.Fix: Ensure you are initializing the code inside useEffect (React), onMounted (Vue), or ensure the component is client-side only ('use client').2. "Container not found"The code ran before the HTML div was created.Fix: Double-check your ID matches (#my-book vs id="my-book") and that you are using the correct lifecycle hook (e.g., useEffect with an empty dependency array []).3. PDF CORS ErrorThe PDF fails to load from a remote URL.Fix: If loading a PDF from a different domain (e.g., AWS S3), ensure that server has CORS headers enabled (Access-Control-Allow-Origin: *).
+```
+
+### ⚠️ Common Issues & Troubleshooting
+#### 1. "Window is not defined" (Next.js / Nuxt / SSR)This happens because the library tries to access the browser window during Server Side Rendering.
+
+**Fix:** Ensure you are initializing the code inside useEffect (React), onMounted (Vue), or ensure the component is client-side only ('use client').
+
+#### 2. "Container not found"The code ran before the HTML div was created.
+
+**Fix:** Double-check your ID matches (#my-book vs id="my-book") and that you are using the correct lifecycle hook (e.g., useEffect with an empty dependency array []).
+#### 3. PDF CORS ErrorThe PDF fails to load from a remote URL.
+
+**Fix:** If loading a PDF from a different domain (e.g., AWS S3), ensure that server has CORS headers enabled (Access-Control-Allow-Origin: *).