# react-pdf-html `` component for [react-pdf](https://github.com/diegomura/react-pdf/) - Support for CSS via `

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph with bold, italic, underline, strikethrough, and all of the above

Paragraph with image and link

  1. Ordered item
  2. 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';
}
`; return ( {html} ); ``` ## Rendering React Components ```tsx import ReactDOMServer from 'react-dom/server'; const element = (

Heading 1

Heading 2

... ); const html = ReactDOMServer.renderToStaticMarkup(element); return ( {html} ); ``` ## Props ```ts type HtmlProps = { children: string; // the HTML collapse?: boolean; // Default: true. Collapse whitespace. If false, render newlines as breaks renderers?: HtmlRenderers; // Mapping of { tagName: HtmlRenderer } style?: Style | Style[]; // Html root View style stylesheet?: HtmlStyles | HtmlStyles[]; // Mapping of { selector: Style } resetStyles?: false; // If true, style/CSS reset }; ``` ## Overriding Element Styles ### Provide a Stylesheet ```tsx const stylesheet = { // clear margins for all

tags p: { margin: 0, }, // add pink background color to elements with class="special" ['.special']: { backgroundColor: 'pink', }, }; return ( {html} ); ``` ### Inline Styles ```tsx const html = `

Foobar
`; return ( {html} ); ``` ### Remote Styles Remote styles must be resolve asynchronously, outside of the React rendering, because react-pdf doesn't support asynchronous rendering ```tsx import { fetchStylesheets } from 'react-pdf-html'; const html = `
`; const stylesheets = await fetchStylesheets(html, { ...fetchOptions }); ... return ( {html} ); ``` ## Resetting Styles Reset browser default styles (see [CSS reset](https://meyerweb.com/eric/tools/css/reset/)) ```tsx return ( {html} ); ``` ## Font Sizes The default styesheet roughly matches browser defaults, using a rough emulation of ems: ```tsx const em = (em: number, relativeSize: number = fontSize) => em * relativeSize; StyleSheet.create({ h1: { fontSize: em(2), marginVertical: em(0.67, em(2)), fontWeight: 'bold', }, ... }); ``` By default, the basis for the font size ems is based on the `fontSize` from `props.style`: ```tsx return ( {html} ); ``` If this is not defined, it falls back to a default of `18` ## Fonts for bold, italic, etc. Please note that `react-pdf` has some constraints with how fonts are applied (see https://react-pdf.org/fonts). You must provide a different font file for each combination of bold, italic, etc. For example: ```ts Font.register({ family: 'OpenSans', fonts: [ { src: fonts + '/Open_Sans/OpenSans-Regular.ttf' }, { src: fonts + '/Open_Sans/OpenSans-Bold.ttf', fontWeight: 'bold' }, { src: fonts + '/Open_Sans/OpenSans-Italic.ttf', fontStyle: 'italic' }, { src: fonts + '/Open_Sans/OpenSans-BoldItalic.ttf', fontWeight: 'bold', fontStyle: 'italic', }, ], }); ```