{"id":35085865,"url":"https://github.com/josippapez/react-pdf-html","last_synced_at":"2025-12-27T13:37:13.211Z","repository":{"id":199527196,"uuid":"703079842","full_name":"josippapez/react-pdf-html","owner":"josippapez","description":"Package for displaying @react-pdf/renderer components as html elements","archived":false,"fork":false,"pushed_at":"2024-10-05T07:31:48.000Z","size":817,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-23T13:06:18.657Z","etag":null,"topics":["pdf","pdf-viewer","react","react-pdf","react-pdf-viewer"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@rawwee/react-pdf-html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/josippapez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-10T14:57:32.000Z","updated_at":"2024-10-06T20:25:18.000Z","dependencies_parsed_at":"2024-01-08T09:29:56.064Z","dependency_job_id":"4be5167c-4a72-49fa-9b5e-2482f925c9c8","html_url":"https://github.com/josippapez/react-pdf-html","commit_stats":null,"previous_names":["josippapez/react-pdf-html"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/josippapez/react-pdf-html","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josippapez%2Freact-pdf-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josippapez%2Freact-pdf-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josippapez%2Freact-pdf-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josippapez%2Freact-pdf-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josippapez","download_url":"https://codeload.github.com/josippapez/react-pdf-html/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josippapez%2Freact-pdf-html/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28079307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-27T02:00:05.897Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pdf","pdf-viewer","react","react-pdf","react-pdf-viewer"],"created_at":"2025-12-27T13:37:12.618Z","updated_at":"2025-12-27T13:37:13.205Z","avatar_url":"https://github.com/josippapez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-pdf-html\n\n`react-pdf-html` is a package that provides components that can render `@react-pdf/renderer` components as HTML components.\n\nThis provides an alternative for rendering PDF on the fly to check the final PDF and it enables having one source of truth for your PDF templates/components.\n\n## Installation\n\nYou can install `react-pdf-html` using npm/yarn/bun:\n\n```bash\nnpm install @rawwee/react-pdf-html\n```\n\n## Usage\n\nTo use `react-pdf-html`, you need to import the components you want to use from the package and render them in your React application as you would when using `@react-pdf/renderer`. Here's an example:\n\n#### Example when displaying it in application\n\n```tsx\nimport React from \"react\";\n// this replaces @react-pdf/renderer components\nimport { Document, Image, Page, View } from \"@rawwee/react-pdf-html\";\n\nconst MyDocument = () =\u003e (\n  \u003cDocument\u003e\n    \u003cPage\u003e\n      \u003cText\u003eHello, World!\u003c/Text\u003e\n    \u003c/Page\u003e\n  \u003c/Document\u003e\n);\n\n// You can then render the component as an HTML component\nconst App = () =\u003e \u003cMyDocument /\u003e;\n\nexport default App;\n```\n\nIn this example, we're rendering a simple PDF document with a single page that contains the text \"Hello, World!\". We're using the PDFViewer component from react-pdf-html to render the PDF as an HTML component.\n\nAs you can see, you don't need the `@react-pdf/renderer`'s `PDFViewer` component to render the PDF (or `Document` component from `wojtekmaj/react-pdf`).\n\n#### Example when rendering the PDF\n\nThe package provides a useful hook called `usePDFComponentsAreHTML()` which enables (or disables) the rendering of the components as HTML components. This is useful when you want to render the PDF conditionally (e.g. when you want to download the PDF).\n\n```tsx\nexport const PDFDownload = ({ PdfInstance, show, closeModal }: Props) =\u003e {\n  const { isHTML, setHtml } = usePDFComponentsAreHTML();\n  const [download, setDownload] = useState(false);\n\n  useEffect(() =\u003e {\n    if (show) {\n      // triggers the rendering of the PDF template component\n      // which is defined as:\n      // const TemplateNotHtml = useCallback(() =\u003e CVTemplate(pdfData), [isHTML, pdfData]);\n      setHtml(false);\n    }\n  }, [show]);\n\n  return (\n    \u003cModal\n      show={show}\n      position=\"center\"\n      closeModal={() =\u003e {\n        setHtml(true);\n        setDownload(false);\n      }}\n    \u003e\n      \u003cdiv\u003e\n        \u003ch1 className=\"text-2xl font-bold\"\u003eDownload CV\u003c/h1\u003e\n        \u003cdiv\u003e\n          {PdfInstance \u0026\u0026\n            (download ? (\n              \u003cPDFDownloadLink\n                className=\"w-full bg-blue-500 p-2 text-center font-bold text-white shadow-[0_0_20px_-5px] hover:shadow-blue-800 focus:shadow-blue-800\"\n                document={!isHTML ? \u003cPdfInstance /\u003e : \u003c\u003e\u003c/\u003e}\n                fileName={`${cvName}.pdf`}\n              \u003e\n                {({ blob, url, loading, error }) =\u003e {\n                  if (loading) return \"Loading document...\";\n                  return \"Download now!\";\n                }}\n              \u003c/PDFDownloadLink\u003e\n            ) : (\n              \u003cbutton\n                className=\"w-full bg-blue-500 p-2 text-center font-bold text-white shadow-[0_0_20px_-5px] hover:shadow-blue-800 focus:shadow-blue-800\"\n                onClick={() =\u003e setDownload(true)}\n              \u003e\n                Download\n              \u003c/button\u003e\n            ))}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/Modal\u003e\n  );\n};\n```\nAs you can see, we're using the `usePDFComponentsAreHTML()` hook to set the `isHTML` value to `false` when the modal is shown. This triggers the rendering of the PDF template component. When the modal is closed, we set the `isHTML` value to `true` which triggers the rendering of the PDF as an HTML component.\n\n## Used by\nYou can check the usage for this package in the following projects:\n- [CV Maker [josippapez/CV-Maker]](https://github.com/josippapez/CV-Maker)\n\n## Contributing\n\nContributions are welcome! If you find a bug or want to add a new feature, please open an issue or submit a pull request on GitHub.\n\n## License\n\nreact-pdf-html is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosippapez%2Freact-pdf-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosippapez%2Freact-pdf-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosippapez%2Freact-pdf-html/lists"}