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

1. Ordered item


2. Ordered item

function myCode() {
  const foo = 'bar';
}

return (


{html}


);
`

Rendering React Components

`tsx
import ReactDOMServer from 'react-dom/server';

const element = (





Heading 1

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

$3

`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}


);
`

$3

`tsx
const html =

return (


{html}


);
`

$3

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 =

rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous" />

return (


{html}


);
`

Resetting Styles

Reset browser default styles (see 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',
},
],
});
``