https://github.com/josippapez/react-pdf-html
Package for displaying @react-pdf/renderer components as html elements
https://github.com/josippapez/react-pdf-html
pdf pdf-viewer react react-pdf react-pdf-viewer
Last synced: about 2 months ago
JSON representation
Package for displaying @react-pdf/renderer components as html elements
- Host: GitHub
- URL: https://github.com/josippapez/react-pdf-html
- Owner: josippapez
- Created: 2023-10-10T14:57:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-05T07:31:48.000Z (over 1 year ago)
- Last Synced: 2025-11-23T13:06:18.657Z (3 months ago)
- Topics: pdf, pdf-viewer, react, react-pdf, react-pdf-viewer
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@rawwee/react-pdf-html
- Size: 798 KB
- Stars: 14
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-pdf-html
`react-pdf-html` is a package that provides components that can render `@react-pdf/renderer` components as HTML components.
This 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.
## Installation
You can install `react-pdf-html` using npm/yarn/bun:
```bash
npm install @rawwee/react-pdf-html
```
## Usage
To 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:
#### Example when displaying it in application
```tsx
import React from "react";
// this replaces @react-pdf/renderer components
import { Document, Image, Page, View } from "@rawwee/react-pdf-html";
const MyDocument = () => (
Hello, World!
);
// You can then render the component as an HTML component
const App = () => ;
export default App;
```
In 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.
As 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`).
#### Example when rendering the PDF
The 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).
```tsx
export const PDFDownload = ({ PdfInstance, show, closeModal }: Props) => {
const { isHTML, setHtml } = usePDFComponentsAreHTML();
const [download, setDownload] = useState(false);
useEffect(() => {
if (show) {
// triggers the rendering of the PDF template component
// which is defined as:
// const TemplateNotHtml = useCallback(() => CVTemplate(pdfData), [isHTML, pdfData]);
setHtml(false);
}
}, [show]);
return (
{
setHtml(true);
setDownload(false);
}}
>
Download CV
{PdfInstance &&
(download ? (
: <>>}
fileName={`${cvName}.pdf`}
>
{({ blob, url, loading, error }) => {
if (loading) return "Loading document...";
return "Download now!";
}}
) : (
setDownload(true)}
>
Download
))}
);
};
```
As 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.
## Used by
You can check the usage for this package in the following projects:
- [CV Maker [josippapez/CV-Maker]](https://github.com/josippapez/CV-Maker)
## Contributing
Contributions 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.
## License
react-pdf-html is licensed under the MIT License.