{"_id":"@ashispavan/pdf-to-flipbook","name":"@ashispavan/pdf-to-flipbook","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ashispavan/pdf-to-flipbook","version":"0.1.0","description":"A tactile, realistic PDF flipbook component for React.","type":"module","main":"./dist/pdf-to-flipbook.cjs","module":"./dist/pdf-to-flipbook.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/pdf-to-flipbook.js","require":"./dist/pdf-to-flipbook.cjs"},"./styles.css":"./dist/pdf-to-flipbook.css"},"sideEffects":["**/*.css"],"publishConfig":{"access":"public","provenance":false,"registry":"https://registry.npmjs.org/"},"engines":{"node":">=18"},"scripts":{"dev":"vite","build":"npm run typecheck && npm run build:lib && npm run build:types && npm run build:demo","build:package":"npm run typecheck && npm run build:lib && npm run build:types","build:types":"tsc -p tsconfig.lib.json --emitDeclarationOnly","build:lib":"vite build --config vite.lib.config.ts","build:demo":"vite build","typecheck":"tsc --noEmit","lint":"eslint .","prepublishOnly":"npm run build:package"},"keywords":["react","pdf","flipbook","page-turn","viewer"],"license":"MIT","peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"lucide-react":"^0.468.0","pdfjs-dist":"6.2.108","react-pageflip":"^2.0.3","react-pdf":"^10.4.1"},"overrides":{"pdfjs-dist":"6.2.108"},"devDependencies":{"@eslint/js":"^9.17.0","@types/react":"^19.0.3","@types/react-dom":"^19.0.2","@vitejs/plugin-react":"^4.3.4","eslint":"^9.17.0","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-react-refresh":"^0.4.16","globals":"^15.14.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"~5.7.2","typescript-eslint":"^8.18.2","vite":"^6.0.5"},"_id":"@ashispavan/pdf-to-flipbook@0.1.0","_nodeVersion":"24.14.0","_npmVersion":"11.11.1","dist":{"integrity":"sha512-0gElrZ5ruxnULVWml4gnvo70Ce/zf60rXgK5sjA2atBQIP3vHgampByuMrrP+omFBPPEJo6IwQkf/Y3euJFTjg==","shasum":"aedd6b260570dd2cb7d576fadba005bd4adc6fff","tarball":"https://registry.npmjs.org/@ashispavan/pdf-to-flipbook/-/pdf-to-flipbook-0.1.0.tgz","fileCount":10,"unpackedSize":3588748,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBMW7m3QhzcSxtZMbmIUHIqGm3VoHDRpjyqj3vstHZpzAiEApXQSJQZIfGCh1fC3Q4KTPsncoMKe1RjuVv29KYi2jL4="}]},"_npmUser":{"name":"ashispavan","email":"ashis.ship@gmail.com"},"directories":{},"maintainers":[{"name":"ashispavan","email":"ashis.ship@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/pdf-to-flipbook_0.1.0_1786890770548_0.7327041640092711"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-16T14:32:50.405Z","0.1.0":"2026-08-16T14:32:50.730Z","modified":"2026-08-16T14:32:50.922Z"},"maintainers":[{"name":"ashispavan","email":"ashis.ship@gmail.com"}],"description":"A tactile, realistic PDF flipbook component for React.","keywords":["react","pdf","flipbook","page-turn","viewer"],"license":"MIT","readme":"# @ashispavan/pdf-to-flipbook\n\nA realistic, responsive PDF flipbook for React. It combines PDF.js rendering with draggable page curls, hard covers, page shadows, thumbnails, zoom, keyboard navigation, fullscreen mode, and a synchronized page-turn sound.\n\n## Features\n\n- Load a PDF from a URL, `File`, `Blob`, `ArrayBuffer`, or `Uint8Array`\n- Responsive single-page and two-page layouts\n- Mouse/touch page dragging and corner curls\n- Hard front and back covers\n- Thumbnails, zoom, fullscreen, and keyboard controls\n- Built-in synchronized page-turn sound, with custom audio support\n- TypeScript declarations and forwarded imperative controls\n\n## Install\n\n```bash\nnpm install @ashispavan/pdf-to-flipbook\n```\n\nReact 18 or newer is required.\n\n## Quick start\n\n```tsx\nimport { PdfFlipbook } from '@ashispavan/pdf-to-flipbook';\nimport '@ashispavan/pdf-to-flipbook/styles.css';\n\nexport function Reader() {\n  return (\n    <div style={{ width: '100%', height: '100vh' }}>\n      <PdfFlipbook source=\"/catalog.pdf\" />\n    </div>\n  );\n}\n```\n\nThe container must have a usable height. The component fills the container and has a default minimum height of 520px.\n\nFor remote PDFs, the PDF server must permit cross-origin requests from your application. Local public-folder URLs and user-selected `File` objects work without additional configuration.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `source` | `string \\| File \\| Blob \\| ArrayBuffer \\| Uint8Array` | required | PDF input. |\n| `initialPage` | `number` | `0` | Initial zero-based page. |\n| `showCover` | `boolean` | `true` | Use hard front and back covers. |\n| `controls` | `boolean` | `true` | Show the control toolbar. |\n| `thumbnails` | `boolean` | `true` | Enable the thumbnail drawer. |\n| `sound` | `boolean` | `true` | Enable page-turn audio initially. |\n| `soundSrc` | `string` | bundled sound | Custom page-turn audio URL. |\n| `flipDuration` | `number` | `850` | Page-turn duration in milliseconds. |\n| `backgroundColor` | `string` | `#1a1916` | Viewer background color. |\n| `accentColor` | `string` | `#df5f4d` | Active-control accent color. |\n| `className` | `string` | — | Extra class for the viewer root. |\n| `style` | `React.CSSProperties` | — | Inline styles for the viewer root. |\n| `loading` | `React.ReactNode` | built in | Custom loading UI. |\n| `error` | `React.ReactNode \\| (error: Error) => React.ReactNode` | built in | Custom error UI. |\n| `onLoad` | `(pageCount: number) => void` | — | Called when the PDF is ready. |\n| `onPageChange` | `(page: number) => void` | — | Called with the zero-based visible page. |\n\n## Custom sound\n\n```tsx\n<PdfFlipbook\n  source=\"/catalog.pdf\"\n  sound\n  soundSrc=\"/sounds/page-turn.mp3\"\n  flipDuration={850}\n/>\n```\n\nAudio starts when the flip engine enters its animation state. Browsers may require the first page turn to be initiated by a user gesture before allowing sound.\n\n## Imperative controls\n\n```tsx\nimport { useRef } from 'react';\nimport {\n  PdfFlipbook,\n  type PdfFlipbookHandle,\n} from '@ashispavan/pdf-to-flipbook';\nimport '@ashispavan/pdf-to-flipbook/styles.css';\n\nexport function ControlledReader() {\n  const book = useRef<PdfFlipbookHandle>(null);\n\n  return (\n    <>\n      <button onClick={() => book.current?.previous()}>Previous</button>\n      <button onClick={() => book.current?.next()}>Next</button>\n      <div style={{ height: 720 }}>\n        <PdfFlipbook ref={book} source=\"/catalog.pdf\" controls={false} />\n      </div>\n    </>\n  );\n}\n```\n\nThe ref exposes `first()`, `previous()`, `next()`, `goToPage(page)`, `zoomIn()`, `zoomOut()`, `resetZoom()`, and `enterFullscreen()`.\n\n## Framework notes\n\nThe viewer uses browser APIs and should render on the client. In Next.js, place it in a Client Component (`'use client'`). If your route is server-rendered and your setup evaluates browser-only packages on the server, load the component with `dynamic(..., { ssr: false })`.\n\n## Local development\n\n```bash\nnpm install\nnpm run dev\n```\n\nThe demo accepts local PDFs through its file picker or drag and drop. Files remain in the browser.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-762fdc55a2e49e3e846f000d769adece"}