{"_id":"@aeli3/react-pdf-viewer","name":"@aeli3/react-pdf-viewer","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aeli3/react-pdf-viewer","description":"A lightweight, customizable React PDF viewer component with TypeScript support","private":false,"version":"1.0.0","type":"module","main":"./dist/pdf-viewer.cjs","module":"./dist/pdf-viewer.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/pdf-viewer.js","require":"./dist/pdf-viewer.cjs","types":"./dist/index.d.ts"},"./style.css":"./dist/pdf-viewer.css"},"repository":{"type":"git","url":"git+https://github.com/aeli3/my-pdf-viewer.git"},"homepage":"https://github.com/aeli3/my-pdf-viewer#readme","bugs":{"url":"https://github.com/aeli3/my-pdf-viewer/issues"},"keywords":["react","pdf","viewer","pdf-viewer","typescript","component","customizable","dark-mode"],"author":{"name":"Ali ali.aarbaj@hotmail.com"},"license":"MIT","scripts":{"dev":"vite","build":"tsc -b && vite build","lint":"eslint .","preview":"vite preview"},"peerDependencies":{"react":"^19.2.4","react-dom":"^19.2.4"},"dependencies":{"pdfjs-dist":"^5.6.205"},"devDependencies":{"@eslint/js":"^9.39.4","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint":"^9.39.4","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2","globals":"^17.4.0","typescript":"~6.0.2","typescript-eslint":"^8.58.0","vite":"^8.0.4"},"_id":"@aeli3/react-pdf-viewer@1.0.0","gitHead":"ce983fea1cdeab6ad19b0e5bd1a3a84e3981747a","_nodeVersion":"22.20.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-0ABAdaOvbXiiv5AKvz7ZD/DBbj0Xhppq1vCsgsQRTLRp2Twy/YFA7kH0ewbiMMWozINRK15/Iw9Bhswhy1t/2Q==","shasum":"51735d3bb9ebad33836394f3f38e19438e1801f4","tarball":"https://registry.npmjs.org/@aeli3/react-pdf-viewer/-/react-pdf-viewer-1.0.0.tgz","fileCount":7,"unpackedSize":4572650,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAzwJ/1xtPfpiFDAQql/zg7aZDR8CbOPG07svC3rJkt/AiEAyvy1EY47AsqpkkLasA+TG4uRzLHGKgeoT6YUZwSG3m0="}]},"_npmUser":{"name":"aeli3","email":"ali.aarbaj@hotmail.com"},"directories":{},"maintainers":[{"name":"aeli3","email":"ali.aarbaj@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-pdf-viewer_1.0.0_1777127266369_0.5537075750771481"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-25T14:27:46.298Z","1.0.0":"2026-04-25T14:27:46.691Z","modified":"2026-04-25T14:27:46.884Z"},"maintainers":[{"name":"aeli3","email":"ali.aarbaj@hotmail.com"}],"description":"A lightweight, customizable React PDF viewer component with TypeScript support","homepage":"https://github.com/aeli3/my-pdf-viewer#readme","keywords":["react","pdf","viewer","pdf-viewer","typescript","component","customizable","dark-mode"],"repository":{"type":"git","url":"git+https://github.com/aeli3/my-pdf-viewer.git"},"author":{"name":"Ali ali.aarbaj@hotmail.com"},"bugs":{"url":"https://github.com/aeli3/my-pdf-viewer/issues"},"license":"MIT","readme":"# PdfViewer\r\n\r\nA lightweight, customizable React PDF viewer component built with TypeScript, powered by PDF.js.\r\n\r\n## Features\r\n\r\n- 📄 Full PDF rendering with pdf.js\r\n- 🎨 Light and dark mode support\r\n- 🔍 Zoom in/out controls\r\n- 📱 Responsive design with mobile support\r\n- ✨ Smooth animations and transitions\r\n- 🎯 Bounding box overlays for annotations\r\n- 📥 Download PDF capability\r\n- ⌨️ Page navigation with input\r\n- 🎪 Intelligent page visibility detection\r\n- 🎨 Fully customizable with CSS tokens\r\n- ♿ Accessible components\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @your-org/pdf-viewer\r\n# or\r\npnpm add @your-org/pdf-viewer\r\n# or\r\nyarn add @your-org/pdf-viewer\r\n```\r\n\r\n## Quick Start\r\n\r\n```tsx\r\nimport { PdfViewer } from '@your-org/pdf-viewer';\r\nimport '@your-org/pdf-viewer/style.css';\r\nimport { useState } from 'react';\r\n\r\nexport default function App() {\r\n    const [isOpen, setIsOpen] = useState(false);\r\n\r\n    return (\r\n        <div>\r\n            <button onClick={() => setIsOpen(true)}>Open PDF</button>\r\n            <PdfViewer isOpen={isOpen} onClose={() => setIsOpen(false)} file=\"/path/to/document.pdf\" />\r\n        </div>\r\n    );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n| Prop               | Type                             | Default         | Description                              |\r\n| ------------------ | -------------------------------- | --------------- | ---------------------------------------- |\r\n| `isOpen`           | `boolean`                        | -               | Controls visibility of the PDF viewer    |\r\n| `onClose`          | `() => void`                     | -               | Callback triggered when viewer is closed |\r\n| `file`             | `string \\| Uint8Array`           | -               | Path to PDF file or PDF data             |\r\n| `theme`            | `'light' \\| 'dark'`              | `'light'`       | Color theme                              |\r\n| `scale`            | `number`                         | `1.2`           | Initial zoom scale                       |\r\n| `minScale`         | `number`                         | `0.5`           | Minimum zoom scale                       |\r\n| `maxScale`         | `number`                         | `2`             | Maximum zoom scale                       |\r\n| `showToolbar`      | `boolean`                        | `true`          | Show zoom controls in toolbar            |\r\n| `portal`           | `Element \\| DocumentFragment`    | `document.body` | DOM element to render into               |\r\n| `boundingBoxesMap` | `Map<number, BoundingBoxType[]>` | -               | Overlay bounding boxes on pages          |\r\n\r\n## Customization\r\n\r\n### CSS Tokens\r\n\r\nCustomize the appearance by overriding CSS custom properties (tokens). All tokens are defined in the `:root` selector and support light/dark mode variants.\r\n\r\n#### Colors\r\n\r\n| Token                | Default (Light) | Default (Dark) | Purpose                  |\r\n| -------------------- | --------------- | -------------- | ------------------------ |\r\n| `--color-primary`    | `#2f3033`       | `#e5eefb`      | Primary text and accents |\r\n| `--color-secondary`  | `#5d5e61`       | `#94a3b8`      | Secondary text           |\r\n| `--color-tertiary`   | `#747591`       | `#a5a8c8`      | Tertiary text            |\r\n| `--color-neutral`    | `#f8f9fa`       | `#1f2937`      | Neutral backgrounds      |\r\n| `--color-bg`         | `#eef0f3`       | `#0b1220`      | Main background          |\r\n| `--color-surface`    | `#ffffff`       | `#111827`      | Card/surface backgrounds |\r\n| `--color-surface-2`  | `#f1f4f6`       | `#1f2937`      | Secondary surface        |\r\n| `--color-text`       | `#2f3033`       | `#e5eefb`      | Primary text color       |\r\n| `--color-text-muted` | `#5d5e61`       | `#94a3b8`      | Muted text color         |\r\n| `--color-border`     | `#e2e5e9`       | `#334155`      | Border color             |\r\n\r\n#### Spacing\r\n\r\n| Token       | Value  |\r\n| ----------- | ------ |\r\n| `--space-1` | `4px`  |\r\n| `--space-2` | `8px`  |\r\n| `--space-3` | `12px` |\r\n| `--space-4` | `16px` |\r\n| `--space-5` | `20px` |\r\n| `--space-6` | `24px` |\r\n\r\n#### Typography\r\n\r\n| Token            | Default                 |\r\n| ---------------- | ----------------------- |\r\n| `--font-heading` | `'Manrope', sans-serif` |\r\n| `--font-body`    | `'Inter', sans-serif`   |\r\n| `--font-label`   | `'Inter', sans-serif`   |\r\n\r\n#### Shadows & Radius\r\n\r\n| Token         | Value                                 |\r\n| ------------- | ------------------------------------- |\r\n| `--shadow-sm` | `0 1px 2px rgba(187, 187, 187, 0.06)` |\r\n| `--shadow-md` | `0 8px 24px rgba(15, 23, 42, 0.12)`   |\r\n| `--radius-sm` | `8px`                                 |\r\n| `--radius-md` | `12px`                                |\r\n| `--radius-lg` | `16px`                                |\r\n\r\n### CSS Classes\r\n\r\nCustomize specific viewer components by targeting their CSS classes:\r\n\r\n| Class                   | Purpose                          |\r\n| ----------------------- | -------------------------------- |\r\n| `.pdfv`                 | Main viewer container            |\r\n| `.pdfv__viewport`       | Scrollable page container        |\r\n| `.pdfv__topbar`         | Header with title and navigation |\r\n| `.pdfv__toolbar`        | Bottom zoom controls             |\r\n| `.pdfv__page`           | Individual page wrapper          |\r\n| `.pdfv__canvas-wrapper` | PDF canvas wrapper               |\r\n| `.pdfv__boundingbox`    | Annotation overlay               |\r\n| `.textLayer`            | Text selection layer             |\r\n| `.loader-container`     | Loading indicator                |\r\n\r\n### Example: Custom Styling\r\n\r\n```tsx\r\nimport { PdfViewer } from '@your-org/pdf-viewer';\r\nimport '@your-org/pdf-viewer/style.css';\r\nimport './custom-pdf-theme.css';\r\n\r\n// In custom-pdf-theme.css:\r\n:root {\r\n  --color-primary: #1e40af;\r\n  --color-bg: #f0f9ff;\r\n  --color-surface: #ffffff;\r\n  --font-heading: 'Sora', sans-serif;\r\n}\r\n\r\n[data-theme='dark'] {\r\n  --color-primary: #60a5fa;\r\n  --color-bg: #0c1222;\r\n  --color-surface: #1e293b;\r\n}\r\n\r\nexport default function App() {\r\n  return (\r\n    <PdfViewer\r\n      isOpen={true}\r\n      onClose={() => {}}\r\n      file=\"/document.pdf\"\r\n      theme=\"dark\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Bounding Boxes (Annotations)\r\n\r\nAdd overlay annotations to specific areas of pages:\r\n\r\n```tsx\r\n<PdfViewer\r\n    file=\"/document.pdf\"\r\n    isOpen={isOpen}\r\n    onClose={() => setIsOpen(false)}\r\n    boundingBoxesMap={\r\n        new Map([\r\n            [\r\n                1,\r\n                [\r\n                    {\r\n                        top: 100,\r\n                        left: 50,\r\n                        bottom: 200,\r\n                        right: 300,\r\n                        style: { backgroundColor: 'rgba(255, 0, 0, 0.3)' },\r\n                    },\r\n                ],\r\n            ],\r\n        ])\r\n    }\r\n/>\r\n```\r\n\r\n## Theme Support\r\n\r\nSet theme using the `theme` prop:\r\n\r\n```tsx\r\n<PdfViewer theme=\"dark\" {...props} />\r\n```\r\n\r\nOr the viewer respects system theme preference when no `data-theme` attribute is set on the root element.\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md","_rev":"1-aac53eacf86bc1956b4e59d2d05fe735"}