Add Next.js samples

wojtekmaj · Sep 22, 2023 · fc18d18 · fc18d18
1 parent c1a398b
commit fc18d18
Show file tree

Hide file tree

Showing 22 changed files with 3,722 additions and 0 deletions.
diff --git a/sample/next-app/.gitignore b/sample/next-app/.gitignore
@@ -0,0 +1,3 @@
+.next
+dist
+node_modules
diff --git a/sample/next-app/app/Sample.css b/sample/next-app/app/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/next-app/app/Sample.tsx b/sample/next-app/app/Sample.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from 'react';
+import { pdfjs, Document, Page } from 'react-pdf';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+
+import './Sample.css';
+
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.js',
+  import.meta.url,
+).toString();
+
+const options = {
+  cMapUrl: '/cmaps/',
+  standardFontDataUrl: '/standard_fonts/',
+};
+
+type PDFFile = string | File | null;
+
+export default function Sample() {
+  const [file, setFile] = useState<PDFFile>('./sample.pdf');
+  const [numPages, setNumPages] = useState<number>();
+
+  function onFileChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    const { files } = event.target;
+
+    if (files && files[0]) {
+      setFile(files[0] || null);
+    }
+  }
+
+  function onDocumentLoadSuccess({ numPages: nextNumPages }: PDFDocumentProxy): void {
+    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/next-app/app/layout.tsx b/sample/next-app/app/layout.tsx
@@ -0,0 +1,11 @@
+export const metadata = {
+  title: 'react-pdf sample page',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en-US">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/sample/next-app/app/page.tsx b/sample/next-app/app/page.tsx
@@ -0,0 +1,5 @@
+import Sample from './Sample.js';
+
+export default function Page() {
+  return <Sample />;
+}
diff --git a/sample/next-app/next-env.d.ts b/sample/next-app/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/sample/next-app/next.config.js b/sample/next-app/next.config.js
@@ -0,0 +1,21 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    /**
+     * Critical: prevents " ⨯ ./node_modules/canvas/build/Release/canvas.node
+     * Module parse failed: Unexpected character '�' (1:0)" error
+     */
+    config.module.rules.push({
+      test: /\.node/,
+      use: 'raw-loader',
+    });
+
+    // You may not need this, it's just to support moduleResolution: 'node16'
+    config.resolve.extensionAlias = {
+      '.js': ['.js', '.ts', '.tsx'],
+    };
+    return config;
+  },
+};
+
+export default nextConfig;
diff --git a/sample/next-app/package.json b/sample/next-app/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "react-pdf-sample-page-next",
+  "version": "4.0.0",
+  "description": "A sample page for React-PDF.",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "preview": "next preview"
+  },
+  "author": {
+    "name": "Wojciech Maj",
+    "email": "kontakt@wojtekmaj.pl"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "next": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-pdf": "latest"
+  },
+  "devDependencies": {
+    "raw-loader": "^4.0.0"
+  }
+}
diff --git a/sample/next-app/public/sample.pdf b/sample/next-app/public/sample.pdf
diff --git a/sample/next-app/tsconfig.json b/sample/next-app/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noUncheckedIndexedAccess": true,
+    "outDir": "dist",
+    "plugins": [{ "name": "next" }],
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "es2015"
+  },
+  "include": [".", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}