Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danomatic/react-pdf-html
Render HTML in react-pdf
https://github.com/danomatic/react-pdf-html
Last synced: 3 months ago
JSON representation
Render HTML in react-pdf
- Host: GitHub
- URL: https://github.com/danomatic/react-pdf-html
- Owner: danomatic
- License: mit
- Created: 2021-06-08T21:45:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-09T09:07:26.000Z (4 months ago)
- Last Synced: 2024-08-10T03:00:05.644Z (4 months ago)
- Language: TypeScript
- Size: 1.04 MB
- Stars: 158
- Watchers: 2
- Forks: 37
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-pdf-html
`` component for [react-pdf](https://github.com/diegomura/react-pdf/)
- Support for CSS via `` tags and `style` attributes (limited to `Style` properties supported by `react-pdf`)
- [Browser CSS defaults](https://www.w3schools.com/cssref/css_default_values.asp) with option for [style reset](https://meyerweb.com/eric/tools/css/reset/)
- Basic `<table>`(attempted using flex layouts) `<ul>` and `<ol>` support
- Ability to provide custom renderers for any tag
- Support for inline `<style>` tags and remote stylesheets (using fetch)
## How it Works
1. Parses the HTML string into a JSON tree of nodes using [node-html-parser](https://github.com/taoqf/node-html-parser)
2. Parses any `<style>` tags in the document and `style` attributes using [css-tree](https://github.com/csstree/csstree)
3. Renders all nodes using the appropriate `react-pdf` components, applying cascading styles for each node as an array passed to the `style` prop:
- block/container nodes using `<View>`
- inline/text nodes using `<Text>`, with appropriate nesting and collapsing of whitepace
- `<img>` nodes using `<Image>`
- `<a>` nodes using `<Link>`
## Installation
```bash
npm i react-pdf-html
```
OR
```bash
yarn add react-pdf-html
```
## Usage
```tsx
import Html from 'react-pdf-html';
const html = `<html>
<body>
<style>
.my-heading4 {
background: darkgreen;
color: white;
}
pre {
background-color: #eee;
padding: 10px;
}
Heading 1
Heading 2
Heading 3
Heading 4
Paragraph with bold, italic, underline,
strikethrough,
and all of the above
Paragraph with image 
and
link
- Unordered item
- Unordered item
- Ordered item
- Ordered item
Text outside of any tags
Column 1
Column 2
Column 3
Foo
Bar
Foobar
Foo
Bar
Some longer thing
Even more content than before!
Even more content than before!
function myCode() {
const foo = 'bar';
}
{`
.heading4 {
background: darkgreen;
color: white;
}
pre {
background-color: #eee;
padding: 10px;
}`}
Heading 1
Heading 2
...