Skip to content

Commit

Permalink
Add Next.js samples
Browse files Browse the repository at this point in the history
  • Loading branch information
wojtekmaj committed Sep 22, 2023
1 parent c1a398b commit fc18d18
Show file tree
Hide file tree
Showing 22 changed files with 3,722 additions and 0 deletions.
3 changes: 3 additions & 0 deletions sample/next-app/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.next
dist
node_modules
61 changes: 61 additions & 0 deletions sample/next-app/app/Sample.css
Original file line number Diff line number Diff line change
@@ -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;
}
60 changes: 60 additions & 0 deletions sample/next-app/app/Sample.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
11 changes: 11 additions & 0 deletions sample/next-app/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
5 changes: 5 additions & 0 deletions sample/next-app/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import Sample from './Sample.js';

export default function Page() {
return <Sample />;
}
5 changes: 5 additions & 0 deletions sample/next-app/next-env.d.ts
Original file line number Diff line number Diff line change
@@ -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.
21 changes: 21 additions & 0 deletions sample/next-app/next.config.js
Original file line number Diff line number Diff line change
@@ -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;
26 changes: 26 additions & 0 deletions sample/next-app/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
Binary file added sample/next-app/public/sample.pdf
Binary file not shown.
23 changes: 23 additions & 0 deletions sample/next-app/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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"]
}
Loading

0 comments on commit fc18d18

Please sign in to comment.