3d-pro-flipbook

3d-pro-flipbook

A lightweight, professional, and responsive 3D PDF Flipbook library for the web.

🚀 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

Install the package via NPM:

=================================

1. Installation

First, add the library to your project via your package manager:Bash

npm 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.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+

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: '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: 1200px; height: 80vh;"></div>
  );
}

🟢 Vue.js / Nuxt:

Use 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: '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: 1200px; height: 80vh;"></div>
</template>

🔴 Angular:

Initialize the library inside the ngAfterViewInit lifecycle method.book.component.ts TypeScript

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: 1200px; height: 80vh;"></div>'
})
export class BookComponent implements AfterViewInit {
  ngAfterViewInit() {
    new ProFlipbook('#ng-book', 'assets/book.pdf', {
      brandText: '3D Flip Book',
      backgroundColor: '#333',
      brandLogo: "https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no"
    });
  }
}

🟠 Svelte / SvelteKit

Use 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: '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>

🌐 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: 1200px; height: 80vh;"></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: '3D Flip Book',
            backgroundColor: '#333',
            brandLogo: "https://lh3.googleusercontent.com/a/ACg8ocJvulN68pLx-O-bP4k-dR2pWWBqSaJwMbCrWQ4iue63h80EXyU=s360-c-no"
        });
    });
</script>

Configuration Options:

You can pass an options object as the third argument.

new ProFlipbook("#id", "file.pdf", {
    soundUrl: './page-flip.mp3', // Give your own page flip sound file path
    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 & 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: *).