3d-pro-flipbook 1.0.0 → 1.0.2

package/README.md

@@ -1,16 +1,107 @@
-# Pro Flipbook JS
+# 3d-pro-flipbook
 
-A professional, lightweight, and responsive 3D PDF Flipbook library for the web.
+A lightweight, professional, and responsive 3D PDF Flipbook library for the web.
 
-## Features
-- 📄 **PDF Support:** Renders PDFs directly into a flipbook.
+## 🚀 Features
+- 📄 **PDF Support:** Renders PDFs directly into a realistic 3D flipbook.
 - 📱 **Responsive:** Automatically resizes to fit the container.
 - 🎨 **Customizable:** Change background colors and branding text.
 - 🖱️ **Interactive:** Zoom, Drag to flip, and Mouse Wheel support.
+- 🔧 **Universal:** Works with React, Vue, Angular, Svelte, and Vanilla JS.
 
-## Installation
+---
 
-You can install the library via NPM:
+## 📦 Installation
+
+Install the package via NPM:
 
 ```bash
-npm install pro-flipbook-js
+npm install 3d-pro-flipbook
+
+=================================
+1. InstallationFirst, add the library to your project via your package manager:Bashnpm install 3d-pro-flipbook
+# or
+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+
+
+import { useEffect } from 'react';
+import { ProFlipbook } from '3d-pro-flipbook';
+import '3d-pro-flipbook/style.css'; // Import styles
+
+export default function Flipbook({ pdfUrl }) {
+  useEffect(() => {
+    // Init inside useEffect to ensure DOM is ready
+    new ProFlipbook('#my-book', pdfUrl, {
+      brandText: 'My React Book'
+    });
+  }, [pdfUrl]);
+
+  return (
+    <div id="my-book" style={{ width: '100%', height: '100vh' }}></div>
+  );
+}
+🟢 Vue.js / NuxtUse the onMounted hook to initialize the library.HTML<script setup>
+import { onMounted } from 'vue';
+import { ProFlipbook } from '3d-pro-flipbook';
+import '3d-pro-flipbook/style.css';
+
+const pdfSource = '/book.pdf';
+
+onMounted(() => {
+  new ProFlipbook('#vue-book', pdfSource, {
+    brandText: 'Vue Book',
+    backgroundColor: '#333'
+  });
+});
+</script>
+
+<template>
+  <div id="vue-book" style="width: 100%; height: 100vh;"></div>
+</template>
+🔴 AngularInitialize the library inside the ngAfterViewInit lifecycle method.book.component.tsTypeScriptimport { 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>'
+})
+export class BookComponent implements AfterViewInit {
+  ngAfterViewInit() {
+    new ProFlipbook('#ng-book', 'assets/book.pdf', {
+      brandText: 'Angular Book'
+    });
+  }
+}
+🟠 Svelte / SvelteKitUse the onMount function.HTML<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'
+    });
+  });
+</script>
+
+<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">
+
+<div id="book-container" style="width: 100%; height: 100vh;"></div>
+
+<script src="https://unpkg.com/3d-pro-flipbook@latest/dist/pro-flipbook.umd.js"></script>
+
+<script>
+    // Access via the global object 'ProFlipbook.ProFlipbook'
+    document.addEventListener('DOMContentLoaded', () => {
+        new ProFlipbook.ProFlipbook('#book-container', 'book.pdf', {
+            brandText: "My HTML Book"
+        });
+    });
+</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"
+});
+⚠️ 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: *).