Skip to content

Commit d94c930

Browse files
ivmarcosivmarcos
authored
Fix method update and add more examples (#78)
* remove node 14 from ci * fix wrong default method that should be save * update README and rename to examples folder * update readme * update examples and api docs * update examples and API docs * run lint * update api docs
1 parent 6ee98c4 commit d94c930

26 files changed

+454
-739
lines changed

‎README.md‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,36 @@ $ npm install react-to-pdf
1818
- [@react-pdf/renderer](https://www.npmjs.com/package/@react-pdf/renderer) - React renderer to create PDF files on the browser and server
1919
- [react-pdf](https://www.npmjs.com/package/react-pdf) - Display PDFs in your React app as easily as if they were images.
2020

21+
22+
## Examples
23+
24+
- [Code Sandbox demo](https://codesandbox.io/s/ancient-violet-sznj9q?file=/src/App.tsx)
25+
- [Using `usePDF` hook](blob/main/examples/ExampleUsePDF.tsx)
26+
- [Using default function](blob/main/examples/ExampleFunction.tsx)
27+
- [Multipage support](blob/main/examples/ExampleMultipage.tsx)
28+
- [Advanced options](blob/main/examples/ExampleAdvanced.tsx)
29+
2130
## Usage
2231

23-
**Using hook**
32+
**Using `usePDF` hook**
2433

2534
```jsx
2635
import { usePDF } from 'react-to-pdf';
2736

2837
const Component = () => {
2938
const { toPDF, targetRef } = usePDF({filename: 'page.pdf'});
3039
return (
31-
<button onClick={toPDF}>Download PDF</button>
32-
<div ref={targetRef}>
33-
Content to be generated to PDF
40+
<div>
41+
<button onClick={() => toPDF()}>Download PDF</button>
42+
<div ref={targetRef}>
43+
Content to be generated to PDF
44+
</div>
3445
</div>
3546
)
3647
}
3748
```
3849

50+
3951
**Using default function**
4052

4153
```jsx
@@ -45,9 +57,11 @@ import generatePDF from 'react-to-pdf';
4557
const Component = () => {
4658
const targetRef = useRef();
4759
return (
48-
<button onClick={() => generatePDF(targetRef, {filename: 'page.pdf'})}>Download PDF</button>
49-
<div ref={targetRef}>
50-
Content to be included in the PDF
60+
<div>
61+
<button onClick={() => generatePDF(targetRef, {filename: 'page.pdf'})}>Download PDF</button>
62+
<div ref={targetRef}>
63+
Content to be included in the PDF
64+
</div>
5165
</div>
5266
)
5367
}
@@ -79,8 +93,9 @@ const options = {
7993
mimeType: 'image/png'
8094
qualityRatio: 1
8195
},
82-
// customize any value passed to the jsPDF instance and html2canvas
83-
// function
96+
// Customize any value passed to the jsPDF instance and html2canvas
97+
// function. You probably will not need this and things can break,
98+
// so use with caution.
8499
overrides: {
85100
// see https://artskydj.github.io/jsPDF/docs/jsPDF.html for more options
86101
pdf: {
@@ -93,13 +108,16 @@ const options = {
93108
},
94109
};
95110

111+
// you can use a function to return the target element besides using React refs
112+
const getTargetElement = () => document.getElementById('content-id');
113+
96114
const Component = () => {
97-
// you can use a function to return the target element besides using React refs
98-
const getTargetElement = () => document.getElementById('content-id');
99115
return (
100-
<button onClick={() => generatePDF(getTargetElement, options)}>Generate PDF</button>
101-
<div id="content-id">
102-
Content to be generated to PDF
116+
<div>
117+
<button onClick={() => generatePDF(getTargetElement, options)}>Generate PDF</button>
118+
<div id="content-id">
119+
Content to be generated to PDF
120+
</div>
103121
</div>
104122
);
105123
}

‎docs/README.md‎

Lines changed: 82 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ react-to-pdf / [Modules](modules.md)
22

33
# React to PDF
44

5-
Easily create pdf documents from React components.
5+
Easily create PDF documents from React components.
66

77
## Install
88

@@ -12,85 +12,113 @@ $ npm install react-to-pdf
1212

1313
## Important Notes
1414

15+
- Not vectorized - the pdf is created from a screenshot of the component and therefore is not vectorized. If you are looking for something more advanced to generate pdf using React components, please check out other popular alternatives packages listed below.
1516
- No SSR
16-
- Single page
17-
- Not vectorized - the pdf is created from a screenshot of the component and therefore is not vectorized. If you are looking for something more advanced for generating pdf using React components, please check out other popular alternatives packages listed below.
1817

1918
## Alternatives and Similars Packages
2019

21-
* [@react-pdf/renderer](https://www.npmjs.com/package/@react-pdf/renderer) - React renderer for creating PDF files on the browser and server
22-
* [react-pdf](https://www.npmjs.com/package/react-pdf) - Display PDFs in your React app as easily as if they were images.
20+
- [@react-pdf/renderer](https://www.npmjs.com/package/@react-pdf/renderer) - React renderer to create PDF files on the browser and server
21+
- [react-pdf](https://www.npmjs.com/package/react-pdf) - Display PDFs in your React app as easily as if they were images.
2322

2423
## Examples
2524

26-
https://codesandbox.io/s/l2l4pz0jyl
25+
- [Code Sandbox demo](https://codesandbox.io/s/ancient-violet-sznj9q?file=/src/App.tsx)
26+
- [Using `usePDF` hook](blob/main/examples/ExampleUsePDF.tsx)
27+
- [Using default function](blob/main/examples/ExampleFunction.tsx)
28+
- [Multipage support](blob/main/examples/ExampleMultipage.tsx)
29+
- [Advanced options](blob/main/examples/ExampleAdvanced.tsx)
2730

2831
## Usage
2932

30-
**Using hook**
33+
**Using `usePDF` hook**
3134

3235
```jsx
33-
import { usePDF } from 'react-to-pdf'
36+
import { usePDF } from 'react-to-pdf';
3437

3538
const Component = () => {
36-
const { toPDF, targetRef } = usePDF();
37-
38-
return (
39-
<button onClick={toPDF}>Generate PDF</button>
40-
<div ref={targetRef}>
41-
Content to be included in the PDF
42-
</div>
43-
)
44-
39+
const { toPDF, targetRef } = usePDF({filename: 'page.pdf'});
40+
return (
41+
<div>
42+
<button onClick={() => toPDF()}>Download PDF</button>
43+
<div ref={targetRef}>
44+
Content to be generated to PDF
45+
</div>
46+
</div>
47+
)
4548
}
46-
4749
```
4850

49-
**Using generatedPDF function**
50-
51-
**Using outer target ref**
51+
**Using default function**
5252

5353
```jsx
54-
import { generatePDF } from 'react-to-pdf'
54+
import { useRef } from 'react';
55+
import generatePDF from 'react-to-pdf';
5556

5657
const Component = () => {
57-
const targetRef = React.createRef();
58-
return (
59-
<button onClick={() => generatePDF(targetRef)}>Generate PDF</button>
60-
<div ref={targetRef}>
61-
Content to be included in the PDF
62-
</div>
63-
)
64-
58+
const targetRef = useRef();
59+
return (
60+
<div>
61+
<button onClick={() => generatePDF(targetRef, {filename: 'page.pdf'})}>Download PDF</button>
62+
<div ref={targetRef}>
63+
Content to be included in the PDF
64+
</div>
65+
</div>
66+
)
6567
}
6668
```
6769

6870
**Advanced options**
71+
6972
```jsx
70-
const ref = React.createRef();
73+
import generatePDF, { Resolution, Margin } from 'react-to-pdf';
74+
7175
const options = {
72-
orientation: 'landscape',
73-
unit: 'in',
74-
format: [4,2]
76+
// default is `save`
77+
method: 'open',
78+
// default is Resolution.MEDIUM = 3, which should be enough, higher values
79+
// increases the image quality but also the size of the PDF, so be careful
80+
// using values higher than 10 when having multiple pages generated, it
81+
// might cause the page to crash or hang.
82+
resolution: Resolution.HIGH,
83+
page: {
84+
// margin is in MM, default is Margin.NONE = 0
85+
margin: Margin.SMALL,
86+
// default is 'A4'
87+
format: 'letter',
88+
// default is 'portrait'
89+
orientation: 'landscape',
90+
},
91+
canvas: {
92+
// default is 'image/jpeg' for better size performance
93+
mimeType: 'image/png'
94+
qualityRatio: 1
95+
},
96+
// Customize any value passed to the jsPDF instance and html2canvas
97+
// function. You probably will not need this and things can break,
98+
// so use with caution.
99+
overrides: {
100+
// see https://artskydj.github.io/jsPDF/docs/jsPDF.html for more options
101+
pdf: {
102+
compress: true
103+
},
104+
// see https://html2canvas.hertzen.com/configuration for more options
105+
canvas: {
106+
useCORS: false
107+
}
108+
},
75109
};
76-
<div>
77-
<ReactToPdf targetRef={ref} filename="div-blue.pdf" options={options} x={.5} y={.5} scale={0.8}>
78-
{({toPdf}) => (
79-
<button onClick={toPdf}>Generate pdf</button>
80-
)}
81-
</ReactToPdf>
82-
<div style={{width: 500, height: 500, background: 'blue'}} ref={ref}/>
83-
</div>
84-
```
85110

86-
## Props
87-
88-
|Prop name |Type |Default |Description
89-
|-----------------|-------------------|-------------------|--------------------------------
90-
|filename | `string` | `'download.pdf'` | Name of the pdf file
91-
|targetRef | `RefObject` | | [React ref](https://reactjs.org/docs/refs-and-the-dom.html) for the target component (use this or inner target reference)
92-
|x | `number` | 0 | X position in document
93-
|y | `number` | 0 | Y position in document
94-
|options | `object` | `undefined` | options for the jsPdf document - [view more details](https://rawgit.com/MrRio/jsPDF/master/docs/)
95-
|onComplete | `function` | `undefined` | callback executed when process is finished
96-
|scale | `number` | 1 | Image scaling
111+
// you can use a function to return the target element besides using React refs
112+
const getTargetElement = () => document.getElementById('content-id');
113+
114+
const Component = () => {
115+
return (
116+
<div>
117+
<button onClick={() => generatePDF(getTargetElement, options)}>Generate PDF</button>
118+
<div id="content-id">
119+
Content to be generated to PDF
120+
</div>
121+
</div>
122+
);
123+
}
124+
```

‎docs/enums/constants.Margin.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
#### Defined in
2323

24-
constants.ts:17
24+
[constants.ts:17](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L17)
2525

2626
___
2727

@@ -31,7 +31,7 @@ ___
3131

3232
#### Defined in
3333

34-
constants.ts:16
34+
[constants.ts:16](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L16)
3535

3636
___
3737

@@ -41,7 +41,7 @@ ___
4141

4242
#### Defined in
4343

44-
constants.ts:14
44+
[constants.ts:14](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L14)
4545

4646
___
4747

@@ -51,4 +51,4 @@ ___
5151

5252
#### Defined in
5353

54-
constants.ts:15
54+
[constants.ts:15](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L15)

‎docs/enums/constants.Resolution.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
#### Defined in
2424

25-
constants.ts:10
25+
[constants.ts:10](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L10)
2626

2727
___
2828

@@ -32,7 +32,7 @@ ___
3232

3333
#### Defined in
3434

35-
constants.ts:9
35+
[constants.ts:9](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L9)
3636

3737
___
3838

@@ -42,7 +42,7 @@ ___
4242

4343
#### Defined in
4444

45-
constants.ts:6
45+
[constants.ts:6](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L6)
4646

4747
___
4848

@@ -52,7 +52,7 @@ ___
5252

5353
#### Defined in
5454

55-
constants.ts:8
55+
[constants.ts:8](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L8)
5656

5757
___
5858

@@ -62,4 +62,4 @@ ___
6262

6363
#### Defined in
6464

65-
constants.ts:7
65+
[constants.ts:7](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L7)

‎docs/modules/constants.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
#### Defined in
2424

25-
constants.ts:20
25+
[constants.ts:20](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L20)
2626

2727
___
2828

@@ -32,4 +32,4 @@ ___
3232

3333
#### Defined in
3434

35-
constants.ts:3
35+
[constants.ts:3](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L3)

0 commit comments

Comments
 (0)