Skip to content

Commit dca6b99

Browse files
wojtekmajwojtekmaj
committed
Add Vite 4 sample (#1328)
* Move Vite 3 sample to vite3 directory * Add Vite 4 sample
1 parent b4b6acd commit dca6b99

17 files changed

+2182
-4
lines changed

‎.github/dependabot.yml

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,13 @@ updates:
2525
open-pull-requests-limit: 10
2626

2727
- package-ecosystem: "npm"
28-
directory: "/sample/vite"
28+
directory: "/sample/vite3"
29+
schedule:
30+
interval: "weekly"
31+
open-pull-requests-limit: 10
32+
33+
- package-ecosystem: "npm"
34+
directory: "/sample/vite4"
2935
schedule:
3036
interval: "weekly"
3137
open-pull-requests-limit: 10

‎sample/vite/.gitignore renamed to ‎sample/vite3/.gitignore

File renamed without changes.

‎sample/vite/Sample.css renamed to ‎sample/vite3/Sample.css

File renamed without changes.

‎sample/vite/Sample.jsx renamed to ‎sample/vite3/Sample.jsx

File renamed without changes.

‎sample/vite/index.html renamed to ‎sample/vite3/index.html

File renamed without changes.

‎sample/vite/index.jsx renamed to ‎sample/vite3/index.jsx

File renamed without changes.

‎sample/vite/package.json renamed to ‎sample/vite3/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "react-pdf-sample-page-vite",
2+
"name": "react-pdf-sample-page-vite3",
33
"version": "4.0.0",
44
"description": "A sample page for React-PDF.",
55
"private": true,

‎sample/vite/sample.pdf renamed to ‎sample/vite3/sample.pdf

File renamed without changes.

‎sample/vite/yarn.lock renamed to ‎sample/vite3/yarn.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1634,9 +1634,9 @@ __metadata:
16341634
languageName: node
16351635
linkType: hard
16361636

1637-
"react-pdf-sample-page-vite@workspace:.":
1637+
"react-pdf-sample-page-vite3@workspace:.":
16381638
version: 0.0.0-use.local
1639-
resolution: "react-pdf-sample-page-vite@workspace:."
1639+
resolution: "react-pdf-sample-page-vite3@workspace:."
16401640
dependencies:
16411641
"@vitejs/plugin-react": ^2.2.0
16421642
react: ^18.2.0

‎sample/vite4/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist
2+
node_modules

‎sample/vite4/Sample.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
margin: 0;
3+
background-color: #525659;
4+
font-family: Segoe UI, Tahoma, sans-serif;
5+
}
6+
7+
.Example input,
8+
.Example button {
9+
font: inherit;
10+
}
11+
12+
.Example header {
13+
background-color: #323639;
14+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
15+
padding: 20px;
16+
color: white;
17+
}
18+
19+
.Example header h1 {
20+
font-size: inherit;
21+
margin: 0;
22+
}
23+
24+
.Example__container {
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
margin: 10px 0;
29+
padding: 10px;
30+
}
31+
32+
.Example__container__load {
33+
margin-top: 1em;
34+
color: white;
35+
}
36+
37+
.Example__container__document {
38+
margin: 1em 0;
39+
}
40+
41+
.Example__container__document .react-pdf__Document {
42+
display: flex;
43+
flex-direction: column;
44+
align-items: center;
45+
}
46+
47+
.Example__container__document .react-pdf__Page {
48+
max-width: calc(100% - 2em);
49+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
50+
margin: 1em;
51+
}
52+
53+
.Example__container__document .react-pdf__Page canvas {
54+
max-width: 100%;
55+
height: auto !important;
56+
}
57+
58+
.Example__container__document .react-pdf__message {
59+
padding: 20px;
60+
color: white;
61+
}

‎sample/vite4/Sample.jsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useState } from 'react';
2+
import { Document, Page } from 'react-pdf/dist/esm/entry.vite';
3+
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
4+
import 'react-pdf/dist/esm/Page/TextLayer.css';
5+
6+
import './Sample.css';
7+
8+
const options = {
9+
cMapUrl: 'cmaps/',
10+
cMapPacked: true,
11+
standardFontDataUrl: 'standard_fonts/',
12+
};
13+
14+
export default function Sample() {
15+
const [file, setFile] = useState('./sample.pdf');
16+
const [numPages, setNumPages] = useState(null);
17+
18+
function onFileChange(event) {
19+
setFile(event.target.files[0]);
20+
}
21+
22+
function onDocumentLoadSuccess({ numPages: nextNumPages }) {
23+
setNumPages(nextNumPages);
24+
}
25+
26+
return (
27+
<div className="Example">
28+
<header>
29+
<h1>react-pdf sample page</h1>
30+
</header>
31+
<div className="Example__container">
32+
<div className="Example__container__load">
33+
<label htmlFor="file">Load from file:</label>{' '}
34+
<input onChange={onFileChange} type="file" />
35+
</div>
36+
<div className="Example__container__document">
37+
<Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
38+
{Array.from(new Array(numPages), (el, index) => (
39+
<Page key={`page_${index + 1}`} pageNumber={index + 1} />
40+
))}
41+
</Document>
42+
</div>
43+
</div>
44+
</div>
45+
);
46+
}

‎sample/vite4/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>react-pdf sample page</title>
7+
</head>
8+
<body>
9+
<div id="react-root"></div>
10+
<script type="module" src="./index.jsx"></script>
11+
</body>
12+
</html>

‎sample/vite4/index.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import Sample from './Sample';
4+
5+
createRoot(document.getElementById('react-root')).render(<Sample />);

‎sample/vite4/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "react-pdf-sample-page-vite4",
3+
"version": "4.0.0",
4+
"description": "A sample page for React-PDF.",
5+
"private": true,
6+
"type": "module",
7+
"scripts": {
8+
"build": "vite build",
9+
"dev": "vite serve"
10+
},
11+
"author": {
12+
"name": "Wojciech Maj",
13+
"email": "[email protected]"
14+
},
15+
"license": "MIT",
16+
"dependencies": {
17+
"react": "^18.2.0",
18+
"react-dom": "^18.2.0",
19+
"react-pdf": "latest"
20+
},
21+
"devDependencies": {
22+
"@vitejs/plugin-react": "^3.0.0",
23+
"vite": "^4.0.0"
24+
}
25+
}

‎sample/vite4/sample.pdf

524 KB
Binary file not shown.

0 commit comments

Comments
 (0)