Add Vite 4 sample (#1328)

* Move Vite 3 sample to vite3 directory * Add Vite 4 sample
wojtekmaj · Feb 12, 2023 · 9c0c16c · 9c0c16c
1 parent 04e642b
commit 9c0c16c
Show file tree

Hide file tree

Showing 16 changed files with 2,175 additions and 3 deletions.
diff --git a/sample/vite/.gitignore → sample/vite3/.gitignore b/sample/vite/.gitignore → sample/vite3/.gitignore
diff --git a/sample/vite/Sample.css → sample/vite3/Sample.css b/sample/vite/Sample.css → sample/vite3/Sample.css
diff --git a/sample/vite/Sample.jsx → sample/vite3/Sample.jsx b/sample/vite/Sample.jsx → sample/vite3/Sample.jsx
diff --git a/sample/vite/index.html → sample/vite3/index.html b/sample/vite/index.html → sample/vite3/index.html
diff --git a/sample/vite/index.jsx → sample/vite3/index.jsx b/sample/vite/index.jsx → sample/vite3/index.jsx
diff --git a/sample/vite/package.json → sample/vite3/package.json b/sample/vite/package.json → sample/vite3/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-pdf-sample-page-vite",
+  "name": "react-pdf-sample-page-vite3",
   "version": "4.0.0",
   "description": "A sample page for React-PDF.",
   "private": true,

diff --git a/sample/vite/sample.pdf → sample/vite3/sample.pdf b/sample/vite/sample.pdf → sample/vite3/sample.pdf
diff --git a/sample/vite/yarn.lock → sample/vite3/yarn.lock b/sample/vite/yarn.lock → sample/vite3/yarn.lock
@@ -1634,9 +1634,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-pdf-sample-page-vite@workspace:.":
+"react-pdf-sample-page-vite3@workspace:.":
   version: 0.0.0-use.local
-  resolution: "react-pdf-sample-page-vite@workspace:."
+  resolution: "react-pdf-sample-page-vite3@workspace:."
   dependencies:
     "@vitejs/plugin-react": ^2.2.0
     react: ^18.2.0

diff --git a/sample/vite4/.gitignore b/sample/vite4/.gitignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/sample/vite4/Sample.css b/sample/vite4/Sample.css
@@ -0,0 +1,61 @@
+body {
+  margin: 0;
+  background-color: #525659;
+  font-family: Segoe UI, Tahoma, sans-serif;
+}
+
+.Example input,
+.Example button {
+  font: inherit;
+}
+
+.Example header {
+  background-color: #323639;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  padding: 20px;
+  color: white;
+}
+
+.Example header h1 {
+  font-size: inherit;
+  margin: 0;
+}
+
+.Example__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px 0;
+  padding: 10px;
+}
+
+.Example__container__load {
+  margin-top: 1em;
+  color: white;
+}
+
+.Example__container__document {
+  margin: 1em 0;
+}
+
+.Example__container__document .react-pdf__Document {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.Example__container__document .react-pdf__Page {
+  max-width: calc(100% - 2em);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  margin: 1em;
+}
+
+.Example__container__document .react-pdf__Page canvas {
+  max-width: 100%;
+  height: auto !important;
+}
+
+.Example__container__document .react-pdf__message {
+  padding: 20px;
+  color: white;
+}
diff --git a/sample/vite4/Sample.jsx b/sample/vite4/Sample.jsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Document, Page } from 'react-pdf/dist/esm/entry.vite';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+
+import './Sample.css';
+
+const options = {
+  cMapUrl: 'cmaps/',
+  cMapPacked: true,
+  standardFontDataUrl: 'standard_fonts/',
+};
+
+export default function Sample() {
+  const [file, setFile] = useState('./sample.pdf');
+  const [numPages, setNumPages] = useState(null);
+
+  function onFileChange(event) {
+    setFile(event.target.files[0]);
+  }
+
+  function onDocumentLoadSuccess({ numPages: nextNumPages }) {
+    setNumPages(nextNumPages);
+  }
+
+  return (
+    <div className="Example">
+      <header>
+        <h1>react-pdf sample page</h1>
+      </header>
+      <div className="Example__container">
+        <div className="Example__container__load">
+          <label htmlFor="file">Load from file:</label>{' '}
+          <input onChange={onFileChange} type="file" />
+        </div>
+        <div className="Example__container__document">
+          <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
+            {Array.from(new Array(numPages), (el, index) => (
+              <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+            ))}
+          </Document>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/sample/vite4/index.html b/sample/vite4/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react-pdf sample page</title>
+  </head>
+  <body>
+    <div id="react-root"></div>
+    <script type="module" src="./index.jsx"></script>
+  </body>
+</html>
diff --git a/sample/vite4/index.jsx b/sample/vite4/index.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Sample from './Sample';
+
+createRoot(document.getElementById('react-root')).render(<Sample />);
diff --git a/sample/vite4/package.json b/sample/vite4/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "react-pdf-sample-page-vite4",
+  "version": "4.0.0",
+  "description": "A sample page for React-PDF.",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite serve"
+  },
+  "author": {
+    "name": "Wojciech Maj",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-pdf": "latest"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^3.0.0",
+    "vite": "^4.0.0"
+  }
+}
diff --git a/sample/vite4/sample.pdf b/sample/vite4/sample.pdf