npm package: 3d-pro-flipbook
Description: A professional 3D PDF Flipbook library for the web.
Author: Sanatan Nayak
Latest version: 1.2.1

# 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

```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.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

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
```bash
<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
```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: 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
```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: '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

```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>

<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.

```bash
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: *).