react-pdf-viewer · phuocng · Sep 2, 2021 · Sep 2, 2021 · Sep 2, 2021
diff --git a/.prettierignore b/.prettierignore
@@ -4,4 +4,5 @@ nextjs/.next
 parcel/.cache
 parcel/dist
 server-side-rendering/dist
+snowpack/dist
 package-lock.json
diff --git a/gatsbyjs/src/styles/styles.css b/gatsbyjs/src/styles/styles.css
@@ -1,4 +1,7 @@
 body {
-    font-family: sans-serif;
     margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+        'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
diff --git a/snowpack/.gitignore b/snowpack/.gitignore
@@ -0,0 +1,3 @@
+dist
+node_modules
+package-lock.json
diff --git a/snowpack/README.md b/snowpack/README.md
@@ -0,0 +1,67 @@
+This folder demonstrates how to bundle [React PDF viewer](https://react-pdf-viewer.dev) with [Snowpack](https://www.snowpack.dev)
+
+## Install
+
+* Install the dependencies
+
+```console
+$ npm install
+```
+
+* Build
+
+```console
+$ npm run build
+```
+
+* Run locally
+
+```console
+$ npm run start
+```
+
+Visit http://localhost:8080/
+
+## Spotlights
+
+[App.jsx](src/App.jsx):
+
+```js
+import * as React from 'react';
+import { Viewer, Worker } from '@react-pdf-viewer/core';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+
+// Import the styles
+import '@react-pdf-viewer/core/lib/styles/index.css';
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+
+// Import the file
+import samplePdfFile from '../public/pdf-open-parameters.pdf';
+
+const App = () => {
+    // Create a new instance of plugin
+    const defaultLayoutPluginInstance = defaultLayoutPlugin();
+
+    return (
+        // Set the worker path
+        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.js">
+            <div
+                style={{
+                    height: '750px',
+                    width: '900px',
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                }}
+            >
+                <Viewer
+                    fileUrl={samplePdfFile}
+                    // Register the plugins
+                    plugins={[defaultLayoutPluginInstance]}
+                />
+            </div>
+        </Worker>
+    );
+};
+
+export default App;
+```
diff --git a/snowpack/package.json b/snowpack/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "react-pdf-viewer-snowpack",
+    "private": true,
+    "version": "0.0.0",
+    "scripts": {
+        "copy": "cp ../assets/pdf-open-parameters.pdf dist",
+        "build": "snowpack build",
+        "start": "snowpack dev"
+    },
+    "dependencies": {
+        "@react-pdf-viewer/core": "2.8.0",
+        "@react-pdf-viewer/default-layout": "2.8.0",
+        "pdfjs-dist": "^2.9.359",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+    },
+    "devDependencies": {
+        "@snowpack/plugin-dotenv": "^2.2.0",
+        "@snowpack/plugin-react-refresh": "^2.5.0",
+        "snowpack": "^3.8.8"
+    }
+}
diff --git a/snowpack/public/index.html b/snowpack/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Snowpack App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/dist/index.js"></script>
+  </body>
+</html>
diff --git a/snowpack/public/pdf-open-parameters.pdf b/snowpack/public/pdf-open-parameters.pdf
diff --git a/snowpack/snowpack.config.mjs b/snowpack/snowpack.config.mjs
@@ -0,0 +1,25 @@
+/** @type {import("snowpack").SnowpackUserConfig } */
+export default {
+    mount: {
+      public: { url: '/', static: true },
+      src: { url: '/dist' },
+    },
+    plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'],
+    routes: [
+      /* Enable an SPA Fallback in development: */
+      // {"match": "routes", "src": ".*", "dest": "/index.html"},
+    ],
+    optimize: {
+      /* Example: Bundle your final build: */
+      // "bundle": true,
+    },
+    packageOptions: {
+      /* ... */
+    },
+    devOptions: {
+      /* ... */
+    },
+    buildOptions: {
+      /* ... */
+    },
+  };
diff --git a/snowpack/src/App.jsx b/snowpack/src/App.jsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Viewer, Worker } from '@react-pdf-viewer/core';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+
+import '@react-pdf-viewer/core/lib/styles/index.css';
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+
+import samplePdfFile from '../public/pdf-open-parameters.pdf';
+
+const App = () => {
+    const defaultLayoutPluginInstance = defaultLayoutPlugin();
+
+    return (
+        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.js">
+            <div
+                style={{
+                    height: '750px',
+                    width: '900px',
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                }}
+            >
+                <Viewer fileUrl={samplePdfFile} plugins={[defaultLayoutPluginInstance]} />
+            </div>
+        </Worker>
+    );
+};
+
+export default App;
diff --git a/snowpack/src/index.css b/snowpack/src/index.css
@@ -0,0 +1,7 @@
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+        'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
diff --git a/snowpack/src/index.jsx b/snowpack/src/index.jsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './App.jsx';
+import './index.css';
+
+ReactDOM.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+    document.getElementById('root')
+);
+
+// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
+// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement
+if (import.meta.hot) {
+    import.meta.hot.accept();
+}