Skip to content

Commit fc18d18

Browse files
wojtekmajwojtekmaj
committed
Add Next.js samples
1 parent c1a398b commit fc18d18

22 files changed

+3722
-0
lines changed

‎sample/next-app/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.next
2+
dist
3+
node_modules

‎sample/next-app/app/Sample.css

+61
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/next-app/app/Sample.tsx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
'use client';
2+
3+
import { useState } from 'react';
4+
import { pdfjs, Document, Page } from 'react-pdf';
5+
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
6+
import 'react-pdf/dist/esm/Page/TextLayer.css';
7+
8+
import './Sample.css';
9+
10+
import type { PDFDocumentProxy } from 'pdfjs-dist';
11+
12+
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
13+
'pdfjs-dist/build/pdf.worker.min.js',
14+
import.meta.url,
15+
).toString();
16+
17+
const options = {
18+
cMapUrl: '/cmaps/',
19+
standardFontDataUrl: '/standard_fonts/',
20+
};
21+
22+
type PDFFile = string | File | null;
23+
24+
export default function Sample() {
25+
const [file, setFile] = useState<PDFFile>('./sample.pdf');
26+
const [numPages, setNumPages] = useState<number>();
27+
28+
function onFileChange(event: React.ChangeEvent<HTMLInputElement>): void {
29+
const { files } = event.target;
30+
31+
if (files && files[0]) {
32+
setFile(files[0] || null);
33+
}
34+
}
35+
36+
function onDocumentLoadSuccess({ numPages: nextNumPages }: PDFDocumentProxy): void {
37+
setNumPages(nextNumPages);
38+
}
39+
40+
return (
41+
<div className="Example">
42+
<header>
43+
<h1>react-pdf sample page</h1>
44+
</header>
45+
<div className="Example__container">
46+
<div className="Example__container__load">
47+
<label htmlFor="file">Load from file:</label>{' '}
48+
<input onChange={onFileChange} type="file" />
49+
</div>
50+
<div className="Example__container__document">
51+
<Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
52+
{Array.from(new Array(numPages), (el, index) => (
53+
<Page key={`page_${index + 1}`} pageNumber={index + 1} />
54+
))}
55+
</Document>
56+
</div>
57+
</div>
58+
</div>
59+
);
60+
}

‎sample/next-app/app/layout.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const metadata = {
2+
title: 'react-pdf sample page',
3+
};
4+
5+
export default function RootLayout({ children }: { children: React.ReactNode }) {
6+
return (
7+
<html lang="en-US">
8+
<body>{children}</body>
9+
</html>
10+
);
11+
}

‎sample/next-app/app/page.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Sample from './Sample.js';
2+
3+
export default function Page() {
4+
return <Sample />;
5+
}

‎sample/next-app/next-env.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎sample/next-app/next.config.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
webpack: (config) => {
4+
/**
5+
* Critical: prevents " ⨯ ./node_modules/canvas/build/Release/canvas.node
6+
* Module parse failed: Unexpected character '�' (1:0)" error
7+
*/
8+
config.module.rules.push({
9+
test: /\.node/,
10+
use: 'raw-loader',
11+
});
12+
13+
// You may not need this, it's just to support moduleResolution: 'node16'
14+
config.resolve.extensionAlias = {
15+
'.js': ['.js', '.ts', '.tsx'],
16+
};
17+
return config;
18+
},
19+
};
20+
21+
export default nextConfig;

‎sample/next-app/package.json

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

‎sample/next-app/public/sample.pdf

524 KB
Binary file not shown.

‎sample/next-app/tsconfig.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"declaration": true,
5+
"esModuleInterop": true,
6+
"incremental": true,
7+
"isolatedModules": true,
8+
"jsx": "preserve",
9+
"lib": ["dom", "dom.iterable", "esnext"],
10+
"module": "esnext",
11+
"moduleResolution": "node",
12+
"noEmit": true,
13+
"noUncheckedIndexedAccess": true,
14+
"outDir": "dist",
15+
"plugins": [{ "name": "next" }],
16+
"resolveJsonModule": true,
17+
"skipLibCheck": true,
18+
"strict": true,
19+
"target": "es2015"
20+
},
21+
"include": [".", ".next/types/**/*.ts"],
22+
"exclude": ["node_modules"]
23+
}

0 commit comments

Comments
 (0)