Add Create React App 5 sample (#923)

wojtekmaj · Jan 19, 2022 · 6bb29a9 · 6bb29a9
1 parent e3a4600
commit 6bb29a9
Show file tree

Hide file tree

Showing 10 changed files with 12,183 additions and 0 deletions.
diff --git a/sample/create-react-app-5/.gitignore b/sample/create-react-app-5/.gitignore
@@ -0,0 +1,4 @@
+build
+node_modules
+public/cmaps
+public/pdf.worker.js
diff --git a/sample/create-react-app-5/package.json b/sample/create-react-app-5/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "react-pdf-sample-page-create-react-app-5",
+  "version": "4.0.0",
+  "description": "A sample page for React-PDF.",
+  "private": true,
+  "main": "src/index.jsx",
+  "scripts": {
+    "copy-cmaps": "node ./scripts/copy-cmaps.js",
+    "copy-worker": "node ./scripts/copy-worker.js",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "author": {
+    "name": "Wojciech Maj",
+    "email": "kontakt@wojtekmaj.pl"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-pdf": "latest",
+    "react-scripts": "5.0.0"
+  },
+  "resolutions": {
+    "mini-css-extract-plugin": "~2.4.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/sample/create-react-app-5/public/index.html b/sample/create-react-app-5/public/index.html
@@ -0,0 +1,11 @@
+<!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>
+  </body>
+</html>
diff --git a/sample/create-react-app-5/public/sample.pdf b/sample/create-react-app-5/public/sample.pdf
diff --git a/sample/create-react-app-5/scripts/copy-cmaps.js b/sample/create-react-app-5/scripts/copy-cmaps.js
@@ -0,0 +1,16 @@
+const fs = require('fs');
+const path = require('path');
+
+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+const sourceDir = path.join(pdfjsDistPath, 'cmaps');
+
+const targetDir = path.join('public', 'cmaps');
+
+// Ensure target directory exists
+fs.mkdirSync(targetDir, { recursive: true });
+
+// Copy all files from the source directory to the target directory
+const files = fs.readdirSync(sourceDir);
+files.forEach((file) => {
+  fs.copyFileSync(path.join(sourceDir, file), path.join(targetDir, file));
+});
diff --git a/sample/create-react-app-5/scripts/copy-worker.js b/sample/create-react-app-5/scripts/copy-worker.js
@@ -0,0 +1,14 @@
+const fs = require('fs');
+const path = require('path');
+
+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+const sourcePath = path.join(pdfjsDistPath, 'legacy', 'build', 'pdf.worker.js');
+
+const targetDir = 'public';
+const targetPath = path.join(targetDir, 'pdf.worker.js');
+
+// Ensure target directory exists
+fs.mkdirSync(targetDir, { recursive: true });
+
+// Copy file
+fs.copyFileSync(sourcePath, targetPath);
diff --git a/sample/create-react-app-5/src/Sample.css b/sample/create-react-app-5/src/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/create-react-app-5/src/Sample.jsx b/sample/create-react-app-5/src/Sample.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Document, Page } from 'react-pdf';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+
+import './Sample.css';
+
+const options = {
+  cMapUrl: 'cmaps/',
+  cMapPacked: true,
+};
+
+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/create-react-app-5/src/index.jsx b/sample/create-react-app-5/src/index.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import { render } from 'react-dom';
+import Sample from './Sample';
+
+render(<Sample />, document.getElementById('react-root'));