{"_id":"3d-pro-flipbook","_rev":"6-eaee921106d140e9211395dfde1d5010","name":"3d-pro-flipbook","dist-tags":{"latest":"1.2.1"},"versions":{"1.0.0":{"name":"3d-pro-flipbook","version":"1.0.0","keywords":["flipbook","pdf","3d","viewer","library"],"author":{"name":"Sanatan Nayak"},"license":"MIT","_id":"3d-pro-flipbook@1.0.0","maintainers":[{"name":"codewithsanatan","email":"sanatannk@gmail.com"}],"dist":{"shasum":"b61945be5c21a238a18abac3d58484609f476132","tarball":"https://registry.npmjs.org/3d-pro-flipbook/-/3d-pro-flipbook-1.0.0.tgz","fileCount":5,"integrity":"sha512-AjXz28WkPk3o+ip8VEY+L3ah+oPrqI7Ffl9QQU0Nfd3MHfwZY79hgFqjTzYmebr76EzfEQEgstOyaNPG01dudg==","signatures":[{"sig":"MEUCIQD8oVXVp0YtgDMLr1rgekp2rsx/4RubP6UCvhl1MKzJSAIge7AhrpmlbiWQPp/bmjuZZaYwF5GVdKznbNjmMlgVrdk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":896859},"main":"./dist/pro-flipbook.umd.js","type":"module","style":"./dist/style.css","module":"./dist/pro-flipbook.es.js","// TYPE":"Using module type is standard for modern libs, but optional here","exports":{".":{"import":"./dist/pro-flipbook.es.js","require":"./dist/pro-flipbook.umd.js"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite","build":"vite build"},"// FILES":"Only upload the dist folder to NPM (keeps download small)","_npmUser":{"name":"codewithsanatan","email":"sanatannk@gmail.com"},"// EXPORTS":"This is the modern way to handle imports","_npmVersion":"10.2.4","description":"A professional 3D PDF Flipbook library for the web.","directories":{},"_nodeVersion":"20.11.0","dependencies":{"page-flip":"^2.0.7","pdfjs-dist":"^2.16.105"},"_hasShrinkwrap":false,"// ENTRY POINTS":"These tell browsers and bundlers which file to use","devDependencies":{"vite":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3d-pro-flipbook_1.0.0_1766406899615_0.7207316586505361","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"3d-pro-flipbook","version":"1.0.1","keywords":["flipbook","pdf","3d","viewer","library"],"author":{"name":"Sanatan Nayak"},"license":"MIT","_id":"3d-pro-flipbook@1.0.1","maintainers":[{"name":"codewithsanatan","email":"sanatannk@gmail.com"}],"dist":{"shasum":"6669ad0d2bf636577db1287fb4ac98e129954e86","tarball":"https://registry.npmjs.org/3d-pro-flipbook/-/3d-pro-flipbook-1.0.1.tgz","fileCount":5,"integrity":"sha512-Ou/4BdqVDwcDZ2gK9xP5/7D/iCgfrNxkyGA4o9Fr/T/p5a8RKo0rAK7KXZPh/XLwEFmgfpKZzrdnWk32OgwCSw==","signatures":[{"sig":"MEQCICfZ6VjWnvkDdpQOP4EJfo0+bu+eVuevQEZtT3oKNFK7AiB1hWOomAc9CgcYZUrHu/7CShs2U1KkOnvVBaT6o+Opag==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":900899},"main":"./dist/pro-flipbook.umd.js","type":"module","style":"./dist/style.css","module":"./dist/pro-flipbook.es.js","// TYPE":"Using module type is standard for modern libs, but optional here","exports":{".":{"import":"./dist/pro-flipbook.es.js","require":"./dist/pro-flipbook.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"3c36cb15db6f07a5935cccc9759c8a561b05d94a","scripts":{"dev":"vite","build":"vite build"},"// FILES":"Only upload the dist folder to NPM (keeps download small)","_npmUser":{"name":"codewithsanatan","email":"sanatannk@gmail.com"},"// EXPORTS":"This is the modern way to handle imports","_npmVersion":"10.2.4","description":"A professional 3D PDF Flipbook library for the web.","directories":{},"_nodeVersion":"20.11.0","dependencies":{"page-flip":"^2.0.7","pdfjs-dist":"^2.16.105"},"_hasShrinkwrap":false,"// ENTRY POINTS":"These tell browsers and bundlers which file to use","devDependencies":{"vite":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3d-pro-flipbook_1.0.1_1766474917299_0.8436759839353949","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"3d-pro-flipbook","version":"1.0.2","keywords":["flipbook","pdf","3d","viewer","library"],"author":{"name":"Sanatan Nayak"},"license":"MIT","_id":"3d-pro-flipbook@1.0.2","maintainers":[{"name":"codewithsanatan","email":"sanatannk@gmail.com"}],"dist":{"shasum":"880213b52a9c9cd6c7cc5b4edee33229eb576b84","tarball":"https://registry.npmjs.org/3d-pro-flipbook/-/3d-pro-flipbook-1.0.2.tgz","fileCount":5,"integrity":"sha512-g1IGZe7RBVQMBF2aWHOCB3FINZFFgkojS1ErhTO3WFh3k9ZvdiCG9jh7qqP49aZs7n1RhcwDGnzXLBINgvBjJQ==","signatures":[{"sig":"MEUCIQCWuIGnhB3GLsh+VIHKVE6/ZEJ1SEY0hwMFCzK4kyXWiQIgc4xKMnTcDOYVlFQeSw/fpYnb0DyTbpdV+/X7wKScIX4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":901225},"main":"./dist/pro-flipbook.umd.js","type":"module","style":"./dist/style.css","module":"./dist/pro-flipbook.es.js","// TYPE":"Using module type is standard for modern libs, but optional here","exports":{".":{"import":"./dist/pro-flipbook.es.js","require":"./dist/pro-flipbook.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"ece2f3939660880c6ea2f968d434d69033d289f3","scripts":{"dev":"vite","build":"vite build"},"// FILES":"Only upload the dist folder to NPM (keeps download small)","_npmUser":{"name":"codewithsanatan","email":"sanatannk@gmail.com"},"// EXPORTS":"This is the modern way to handle imports","_npmVersion":"10.2.4","description":"A professional 3D PDF Flipbook library for the web.","directories":{},"_nodeVersion":"20.11.0","dependencies":{"page-flip":"^2.0.7","pdfjs-dist":"^2.16.105"},"_hasShrinkwrap":false,"// ENTRY POINTS":"These tell browsers and bundlers which file to use","devDependencies":{"vite":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3d-pro-flipbook_1.0.2_1766475627252_0.31259055292417726","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"3d-pro-flipbook","version":"1.2.0","keywords":["flipbook","pdf","3d","viewer","library"],"author":{"name":"Sanatan Nayak"},"license":"MIT","_id":"3d-pro-flipbook@1.2.0","maintainers":[{"name":"codewithsanatan","email":"sanatannk@gmail.com"}],"dist":{"shasum":"665bc8b427fa95b2abc5f4ecf2a4891a79015d71","tarball":"https://registry.npmjs.org/3d-pro-flipbook/-/3d-pro-flipbook-1.2.0.tgz","fileCount":5,"integrity":"sha512-pEI3odZ7D4SGHA9uhunh2xq70h0solPuKh2s/dvHy6eKwEGEXtsFDZoYH6mSGRVpoWXXxGg6H5BjV3KYQoYomg==","signatures":[{"sig":"MEQCIBuUXHfIyW8YTOns4YdM5mmr73cF63W/6tBXTWAdV02JAiBB4bc00SLn+gkd5VVklldQvEIgQYAV+XJ/c5KlugmjxA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":906938},"main":"./dist/pro-flipbook.umd.js","type":"module","style":"./dist/style.css","module":"./dist/pro-flipbook.es.js","// TYPE":"Using module type is standard for modern libs, but optional here","exports":{".":{"import":"./dist/pro-flipbook.es.js","require":"./dist/pro-flipbook.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"715e52be94ed0e957f8dcc4c4af1126679804f35","scripts":{"dev":"vite","build":"vite build"},"// FILES":"Only upload the dist folder to NPM (keeps download small)","_npmUser":{"name":"codewithsanatan","email":"sanatannk@gmail.com"},"// EXPORTS":"This is the modern way to handle imports","_npmVersion":"10.2.4","description":"A professional 3D PDF Flipbook library for the web.","directories":{},"_nodeVersion":"20.11.0","dependencies":{"page-flip":"^2.0.7","pdfjs-dist":"^2.16.105"},"_hasShrinkwrap":false,"// ENTRY POINTS":"These tell browsers and bundlers which file to use","devDependencies":{"vite":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3d-pro-flipbook_1.2.0_1766751549856_0.023400957611112272","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"3d-pro-flipbook","version":"1.2.1","keywords":["flipbook","pdf","3d","viewer","library"],"author":{"name":"Sanatan Nayak"},"license":"MIT","_id":"3d-pro-flipbook@1.2.1","maintainers":[{"name":"codewithsanatan","email":"sanatannk@gmail.com"}],"dist":{"shasum":"2587b0903818b8e99c30d00177bf0f09bc248c21","tarball":"https://registry.npmjs.org/3d-pro-flipbook/-/3d-pro-flipbook-1.2.1.tgz","fileCount":5,"integrity":"sha512-ALASjj3zranvpYbAp0KOBYPwyb2iXM4ZUF4/b0aSa1xRm+V5y//8eo/Rk87fxFuqT057j0Hl6v1jKjj2IzZ5Cg==","signatures":[{"sig":"MEQCIC095vIrjB62+Lsc+LX0NQgq2C7LNP3VLjw+PdPhIN3NAiAth7RfdVTL8n9IW2mnmQs0IBwPbrlTwmez5tuwXclrNA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":971164},"main":"./dist/pro-flipbook.umd.js","type":"module","style":"./dist/style.css","module":"./dist/pro-flipbook.es.js","// TYPE":"Using module type is standard for modern libs, but optional here","exports":{".":{"import":"./dist/pro-flipbook.es.js","require":"./dist/pro-flipbook.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"58b63693e6238a906a9111142144820c571d8e6f","scripts":{"dev":"vite","build":"vite build"},"// FILES":"Only upload the dist folder to NPM (keeps download small)","_npmUser":{"name":"codewithsanatan","email":"sanatannk@gmail.com"},"// EXPORTS":"This is the modern way to handle imports","_npmVersion":"10.2.4","description":"A professional 3D PDF Flipbook library for the web.","directories":{},"_nodeVersion":"20.11.0","dependencies":{"page-flip":"^2.0.7","pdfjs-dist":"^2.16.105"},"_hasShrinkwrap":false,"// ENTRY POINTS":"These tell browsers and bundlers which file to use","devDependencies":{"vite":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/3d-pro-flipbook_1.2.1_1767353993352_0.1262983004441094","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-12-22T12:34:59.614Z","modified":"2026-01-12T13:22:57.074Z","1.0.0":"2025-12-22T12:34:59.820Z","1.0.1":"2025-12-23T07:28:37.493Z","1.0.2":"2025-12-23T07:40:27.445Z","1.2.0":"2025-12-26T12:19:10.037Z","1.2.1":"2026-01-02T11:39:53.616Z"},"author":{"name":"Sanatan Nayak"},"license":"MIT","keywords":["flipbook","pdf","3d","viewer","library"],"description":"A professional 3D PDF Flipbook library for the web.","maintainers":[{"email":"info@reddensoft.com","name":"reddensoft"}],"readme":"# 3d-pro-flipbook\r\n\r\nA lightweight, professional, and responsive 3D PDF Flipbook library for the web.\r\n\r\n## 🚀 Features\r\n- 📄 **PDF Support:** Renders PDFs directly into a realistic 3D flipbook.\r\n- 📱 **Responsive:** Automatically resizes to fit the container.\r\n- 🎨 **Customizable:** Change background colors and branding text.\r\n- 🖱️ **Interactive:** Zoom, Drag to flip, and Mouse Wheel support.\r\n- 🔧 **Universal:** Works with React, Vue, Angular, Svelte, and Vanilla JS.\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\nInstall the package via NPM:\r\n\r\n=================================\r\n#### 1. Installation\r\n\r\nFirst, add the library to your project via your package manager:Bash\r\n```\r\nnpm install 3d-pro-flipbook\r\n```\r\n### or\r\n\r\n```bash\r\nyarn add 3d-pro-flipbook\r\n```\r\n###\r\n#### 2. The Universal \"Golden Rule\"No matter which framework you use, the logic is always the same:\r\nImport the class and the CSS.\r\nCreate a container div with a unique ID \r\n\r\n(e.g., #my-book).Initialize the book inside your framework's \"Mounted\" lifecycle hook (this ensures the HTML exists before the code runs).\r\n\r\n#### 3. Framework Examples\r\n\r\n### ⚛️ React / Next.js\r\nSince this library interacts with the DOM (browser), you must use a Client Component and the useEffect hook. components/Flipbook.js\r\n\r\n'use client'; // Required for Next.js 13+\r\n\r\n```bash\r\nimport { useEffect } from 'react';\r\nimport { ProFlipbook } from '3d-pro-flipbook';\r\nimport '3d-pro-flipbook/style.css'; // Import styles\r\n\r\nexport default function Flipbook({ pdfUrl }) {\r\n  useEffect(() => {\r\n    // Init inside useEffect to ensure DOM is ready\r\n    new ProFlipbook('#my-book', pdfUrl, {\r\n      brandText: '3D Flip Book',\r\n      backgroundColor: '#333',\r\n      brandLogo: \"https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no\"\r\n    });\r\n  }, [pdfUrl]);\r\n\r\n  return (\r\n    <div id=\"my-book\" style=\"width: 1200px; height: 80vh;\"></div>\r\n  );\r\n}\r\n```\r\n\r\n### 🟢 Vue.js / Nuxt: \r\nUse the onMounted hook to initialize the library.HTML\r\n```bash\r\n<script setup>\r\nimport { onMounted } from 'vue';\r\nimport { ProFlipbook } from '3d-pro-flipbook';\r\nimport '3d-pro-flipbook/style.css';\r\n\r\nconst pdfSource = '/book.pdf';\r\n\r\nonMounted(() => {\r\n  new ProFlipbook('#vue-book', pdfSource, {\r\n    brandText: '3D Flip Book',\r\n    backgroundColor: '#333',\r\n    brandLogo: \"https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no\"\r\n  });\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div id=\"vue-book\" style=\"width: 1200px; height: 80vh;\"></div>\r\n</template>\r\n```\r\n\r\n### 🔴 Angular: \r\nInitialize the library inside the ngAfterViewInit lifecycle method.book.component.ts\r\nTypeScript\r\n```bash\r\nimport { Component, AfterViewInit } from '@angular/core';\r\nimport { ProFlipbook } from '3d-pro-flipbook';\r\n// Ensure style.css is added to your angular.json styles array or imported in CSS\r\n\r\n@Component({\r\n  selector: 'app-book',\r\n  template: '<div id=\"ng-book\" style=\"width: 1200px; height: 80vh;\"></div>'\r\n})\r\nexport class BookComponent implements AfterViewInit {\r\n  ngAfterViewInit() {\r\n    new ProFlipbook('#ng-book', 'assets/book.pdf', {\r\n      brandText: '3D Flip Book',\r\n      backgroundColor: '#333',\r\n      brandLogo: \"https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no\"\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n### 🟠 Svelte / SvelteKit\r\nUse the onMount function.\r\n\r\nHTML\r\n```bash\r\n<script>\r\n  import { onMount } from 'svelte';\r\n  import { ProFlipbook } from '3d-pro-flipbook';\r\n  import '3d-pro-flipbook/style.css';\r\n\r\n  onMount(() => {\r\n    new ProFlipbook('#svelte-book', '/book.pdf', {\r\n      brandText: '3D Flip Book',\r\n      backgroundColor: '#333',\r\n      brandLogo: \"https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no\"\r\n    });\r\n  });\r\n</script>\r\n<div id=\"svelte-book\" style=\"width: 1200px; height: 80vh;\"></div>\r\n```\r\n\r\n### 🌐 Vanilla HTML (No Framework)\r\nIf you aren't using a bundler, you can use the CDN links directly.\r\n\r\nHTML\r\n\r\n```bash\r\n<link rel=\"stylesheet\" href=\"https://unpkg.com/3d-pro-flipbook@latest/dist/style.css\">\r\n\r\n<div id=\"book-container\" style=\"width: 1200px; height: 80vh;\"></div>\r\n\r\n<script src=\"https://unpkg.com/3d-pro-flipbook@latest/dist/pro-flipbook.umd.js\"></script>\r\n\r\n<script>\r\n    // Access via the global object 'ProFlipbook.ProFlipbook'\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        new ProFlipbook.ProFlipbook('#book-container', 'book.pdf', {\r\n            brandText: '3D Flip Book',\r\n            backgroundColor: '#333',\r\n            brandLogo: \"https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no\"\r\n        });\r\n    });\r\n</script>\r\n```\r\n\r\n### Configuration Options:\r\nYou can pass an options object as the third argument.\r\n\r\n```bash\r\nnew ProFlipbook(\"#id\", \"file.pdf\", {\r\n    soundUrl: './page-flip.mp3', // Give your own page flip sound file path\r\n    brandText: \"3D Flip Book\", // This text shown on the loader and book last page\r\n    backgroundColor: \"#333\", // The background color of the viewer area\r\n    brandFontColor: \"#fff\", // The brand title color in last page\r\n    pageBackgroundColor: \"#5f5e5e\", // This will apply to last page background color\r\n    pageFontColor: \"#ffffff\", // This will apply to loading text\r\n    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\r\n});\r\n```\r\n\r\n### ⚠️ Common Issues & Troubleshooting\r\n#### 1. \"Window is not defined\" (Next.js / Nuxt / SSR)This happens because the library tries to access the browser window during Server Side Rendering.\r\n\r\n**Fix:** Ensure you are initializing the code inside useEffect (React), onMounted (Vue), or ensure the component is client-side only ('use client').\r\n\r\n#### 2. \"Container not found\"The code ran before the HTML div was created.\r\n\r\n**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 []).\r\n#### 3. PDF CORS ErrorThe PDF fails to load from a remote URL.\r\n\r\n**Fix:** If loading a PDF from a different domain (e.g., AWS S3), ensure that server has CORS headers enabled (Access-Control-Allow-Origin: *).","readmeFilename":"README.md"}