{"_id":"@anciny/page-print-component","name":"@anciny/page-print-component","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@anciny/page-print-component","version":"1.0.0","private":false,"description":"A React component for exporting pages as PDF","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","build":"npm run clean && tsc && vite build"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@types/node":"^22.12.0","html2canvas":"^1.4.1","jspdf":"^2.5.1","rimraf":"^6.0.1","typescript":"^5.0.0","vite":"^5.0.0"},"license":"MIT","dependencies":{"@vitejs/plugin-react":"^4.3.4"},"_id":"@anciny/page-print-component@1.0.0","_nodeVersion":"22.11.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-L+56zabJAzLNXoABTRYunnLJciGHIhJXq7e7WFTBrHBHO/VhQw+6inDhPVxbL9uJRF5Ggv3QHOAF+j/DXlwPqw==","shasum":"b8dc871b0ca449590e46fe3765aa6ccb4df26b41","tarball":"https://registry.npmjs.org/@anciny/page-print-component/-/page-print-component-1.0.0.tgz","fileCount":8,"unpackedSize":1756641,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDYeVBl9fyEOdUsxHC7iHbp/QD4VTTZZDesaaAdfhPxVAiAxe244zLhQqBxu9jmG6FpsqvJiMfDp4HYvE+t/TrXmEA=="}]},"_npmUser":{"name":"anciny","email":"sebastian.a.rosenblad@gmail.com"},"directories":{},"maintainers":[{"name":"anciny","email":"sebastian.a.rosenblad@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/page-print-component_1.0.0_1738251602818_0.7282025281955105"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-30T15:40:02.651Z","1.0.0":"2025-01-30T15:40:03.053Z","modified":"2025-01-30T15:40:04.305Z"},"maintainers":[{"name":"anciny","email":"sebastian.a.rosenblad@gmail.com"}],"description":"A React component for exporting pages as PDF","license":"MIT","readme":"# PagePrint Component\n\n📄 A React component that allows you to **preview and export pages as a PDF**, while maintaining accurate A4 dimensions.\n\n## 🚀 Features\n- **Accurate A4 Page Size** 📏 (210mm × 297mm)\n- **PDF Export Support** 🖨️\n- **Custom Background Image Support** 🖼️\n- **Automatic Page Scaling for Responsive Layouts** 📐\n- **Maintains the Exact Layout Across Screen Sizes & PDF Exports** ✅\n\n---\n\n## 📦 Installation\nInstall the component in your React project:\n\n```sh\nnpm install page-print-component\n```\n\nor with Yarn:\n\n```sh\nyarn add page-print-component\n```\n\n---\n\n## ⚡ Usage\nImport and use the component in your app:\n\n```tsx\nimport React from \"react\";\nimport { PagePrint } from \"page-print-component\";\n\nconst App = () => {\n  const pages = [\n    <div><h1>Page 1</h1><p>This is the first page.</p></div>,\n    <div><h1>Page 2</h1><p>This is the second page.</p></div>,\n  ];\n\n  return (\n    <PagePrint pages={pages} backgroundImage=\"https://yourimage.com/bg.jpg\" />\n  );\n};\n\nexport default App;\n```\n\n---\n\n## 🎨 Styling\nBy default, the component ensures proper A4 page formatting. However, you can add custom styles:\n\n```css\n.page {\n  font-family: Arial, sans-serif;\n  padding: 20px;\n}\n```\n\n---\n\n## 🖨️ Print & Export to PDF\nWhen using the component, you get one built-in button:\n- **Export to PDF** 📄 → Generates a **high-resolution A4 PDF file**.\n\n---\n\n## 🛠️ Props\n| Prop Name        | Type                 | Default  | Description |\n|-----------------|---------------------|---------|-------------|\n| `pages`         | `JSX.Element[]`     | `[]`     | The pages to display & export |\n| `backgroundImage` | `string`           | `\"\"`     | Optional background image URL |\n\n---\n\n## 🎯 Example with Dynamic Content\n```tsx\nconst pages = Array.from({ length: 3 }, (_, i) => (\n  <div>\n    <h2>Dynamic Page {i + 1}</h2>\n    <p>Generated content for page {i + 1}.</p>\n  </div>\n));\n\nreturn <PagePrint pages={pages} />;\n```\n\n---\n\n## 🔧 Development\nClone the repo and install dependencies:\n```sh\ngit clone https://github.com/your-repo/page-print-component.git\ncd page-print-component\nnpm install\n```\n\nRun in development mode:\n```sh\nnpm run dev\n```\n\nBuild for production:\n```sh\nnpm run build\n```\n\n---\n\n## 📜 License\nThis package is licensed under the **MIT License**.\n\n---\n\n## 🙌 Contributing\nFeel free to submit issues or PRs on [GitHub](https://github.com/your-repo/page-print-component).\n\n---\n\n🚀 **Enjoy building with PagePrint!** 🖨️🎨\n```\n\n---","readmeFilename":"README.md"}