Skip to content

Commit 00e7d51

Browse files
committed
remove dependency on fs, url, sync-fetch. resolve external css outside of react rendering
1 parent e1c6a65 commit 00e7d51

12 files changed

Lines changed: 1195 additions & 6782 deletions

README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
- [Browser CSS defaults](https://www.w3schools.com/cssref/css_default_values.asp) with option for [style reset](https://meyerweb.com/eric/tools/css/reset/)
77
- Basic `<table>`(attempted using flex layouts) `<ul>` and `<ol>` support
88
- Ability to provide custom renderers for any tag
9+
- Support for inline `<style>` tags and remote stylesheets (using fetch)
910

1011
## How it Works
1112

@@ -23,6 +24,12 @@
2324
npm i react-pdf-html
2425
```
2526

27+
OR
28+
29+
```bash
30+
yarn add react-pdf-html
31+
```
32+
2633
## Usage
2734

2835
```tsx
@@ -197,6 +204,43 @@ return (
197204
);
198205
```
199206

207+
### Remote Styles
208+
209+
Remote styles must be resolve asynchronously, outside of the React rendering,
210+
because react-pdf doesn't support asynchronous rendering
211+
212+
```tsx
213+
import { fetchStylesheets } from 'react-pdf-html';
214+
215+
const html = `<html>
216+
<head>
217+
<link
218+
rel="stylesheet"
219+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
220+
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
221+
crossorigin="anonymous" />
222+
</head>
223+
224+
<body>
225+
<div></div>
226+
</body>
227+
</html>`;
228+
229+
const stylesheets = await fetchStylesheets(html, {
230+
...fetchOptions
231+
});
232+
233+
...
234+
235+
return (
236+
<Document>
237+
<Page>
238+
<Html stylesheet={stylesheets}>{html}</Html>
239+
</Page>
240+
</Document>
241+
);
242+
```
243+
200244
## Resetting Styles
201245

202246
Reset browser default styles (see [CSS reset](https://meyerweb.com/eric/tools/css/reset/))

0 commit comments

Comments
 (0)