{message}
67 |{details}
68 | {stack && ( 69 |
70 | {stack}
71 |
72 | )}
73 |
40 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/apps/docs/src/components/DocsHeader.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { usePathname } from 'next/navigation'
4 |
5 | import { navigation } from '@/lib/navigation'
6 |
7 | export function DocsHeader({ title }: { title?: string }) {
8 | let pathname = usePathname()
9 | let section = navigation.find((section) =>
10 | section.links.find((link) => link.href === pathname),
11 | )
12 |
13 | if (!title && !section) {
14 | return null
15 | }
16 |
17 | return (
18 |
42 |
51 | 45 | {title} 46 |
47 |
48 | {children}
49 |
50 | 21 | {section.title} 22 |
23 | )} 24 | {title && ( 25 |26 | {title} 27 |
28 | )} 29 |
23 |
24 | {children}
26 |
27 |
29 |
21 |
22 | {tokens.map((line, lineIndex) => (
23 |
24 | {line
25 | .filter((token) => !token.empty)
26 | .map((token, tokenIndex) => (
27 |
28 | ))}
29 | {'\n'}
30 |
31 | ))}
32 |
33 |
34 | )}
35 |
36 |
172 | )
173 | }
174 |
--------------------------------------------------------------------------------
/apps/docs/src/components/HeroBackground.tsx:
--------------------------------------------------------------------------------
1 | import { useId } from 'react'
2 |
3 | export function HeroBackground(props: React.ComponentPropsWithoutRef<'svg'>) {
4 | let id = useId()
5 |
6 | return (
7 |
187 | )
188 | }
189 |
--------------------------------------------------------------------------------
/apps/docs/src/components/Icon.tsx:
--------------------------------------------------------------------------------
1 | import { useId } from 'react'
2 | import clsx from 'clsx'
3 |
4 | import { InstallationIcon } from '@/components/icons/InstallationIcon'
5 | import { LightbulbIcon } from '@/components/icons/LightbulbIcon'
6 | import { PluginsIcon } from '@/components/icons/PluginsIcon'
7 | import { PresetsIcon } from '@/components/icons/PresetsIcon'
8 | import { ThemingIcon } from '@/components/icons/ThemingIcon'
9 | import { WarningIcon } from '@/components/icons/WarningIcon'
10 |
11 | const icons = {
12 | installation: InstallationIcon,
13 | presets: PresetsIcon,
14 | plugins: PluginsIcon,
15 | theming: ThemingIcon,
16 | lightbulb: LightbulbIcon,
17 | warning: WarningIcon,
18 | }
19 |
20 | const iconStyles = {
21 | blue: '[--icon-foreground:var(--color-slate-900)] [--icon-background:var(--color-white)]',
22 | amber:
23 | '[--icon-foreground:var(--color-amber-900)] [--icon-background:var(--color-amber-100)]',
24 | }
25 |
26 | export function Icon({
27 | icon,
28 | color = 'blue',
29 | className,
30 | ...props
31 | }: {
32 | color?: keyof typeof iconStyles
33 | icon: keyof typeof icons
34 | } & Omit
37 |
171 |
38 |
170 |
39 |
64 |
49 |
63 | 50 | The simplest way to embed PDFs. 51 |
52 |53 | Under 1kB in size. Modern React hook architecture. Easily add embedded 54 | PDFs in your modern React web app. 55 |
56 |
57 |
58 |
61 |
62 |
65 |
169 |
66 |
68 |
69 |
168 |
90 |
91 |
92 |
167 |
93 |
166 |
95 | {tabs.map((tab) => (
96 |
116 |
105 |
114 | ))}
115 |
111 | {tab.name}
112 |
113 |
117 |
130 |
135 | {({
136 | className,
137 | style,
138 | tokens,
139 | getLineProps,
140 | getTokenProps,
141 | }) => (
142 |
164 |
165 |
149 |
150 | {tokens.map((line, lineIndex) => (
151 |
152 | {line.map((token, tokenIndex) => (
153 |
157 | ))}
158 |
159 | ))}
160 |
161 |
162 | )}
163 |
47 |
49 |
50 |
51 |
55 |
56 |
58 |
59 |
64 |
74 |
90 | )
91 | }
92 |
--------------------------------------------------------------------------------
/apps/docs/src/components/Logo.tsx:
--------------------------------------------------------------------------------
1 | function LogomarkPaths() {
2 | return (
3 |
79 |
89 |
80 |
81 |
82 |
83 |
87 | {children}
88 |
84 |
86 |
21 |
24 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/apps/docs/src/components/MobileNavigation.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Suspense, useCallback, useEffect, useState } from 'react'
4 | import Link from 'next/link'
5 | import { usePathname, useSearchParams } from 'next/navigation'
6 | import { Dialog, DialogPanel } from '@headlessui/react'
7 |
8 | import { Logomark } from '@/components/Logo'
9 | import { Navigation } from '@/components/Navigation'
10 |
11 | function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
12 | return (
13 |
23 | )
24 | }
25 |
26 | function CloseIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
27 | return (
28 |
38 | )
39 | }
40 |
41 | function CloseOnNavigation({ close }: { close: () => void }) {
42 | let pathname = usePathname()
43 | let searchParams = useSearchParams()
44 |
45 | useEffect(() => {
46 | close()
47 | }, [pathname, searchParams, close])
48 |
49 | return null
50 | }
51 |
52 | export function MobileNavigation() {
53 | let [isOpen, setIsOpen] = useState(false)
54 | let close = useCallback(() => setIsOpen(false), [setIsOpen])
55 |
56 | function onLinkClick(event: React.MouseEvent@mikecousins/react-pdf
25 |
29 |
30 | {dir === 'next' ? 'Next' : 'Previous'}
31 |
32 |
33 |
40 | {title}
41 |
49 |
50 | )
51 | }
52 |
53 | export function PrevNextLinks() {
54 | let pathname = usePathname()
55 | let allLinks = navigation.flatMap((section) => section.links)
56 | let linkIndex = allLinks.findIndex((link) => link.href === pathname)
57 | let previousPage = linkIndex > -1 ? allLinks[linkIndex - 1] : null
58 | let nextPage = linkIndex > -1 ? allLinks[linkIndex + 1] : null
59 |
60 | if (!nextPage && !previousPage) {
61 | return null
62 | }
63 |
64 | return (
65 | -
66 | {previousPage &&
8 | {children}
9 |
10 | )
11 | }
12 |
13 | export function QuickLink({
14 | title,
15 | description,
16 | href,
17 | icon,
18 | }: {
19 | title: string
20 | description: string
21 | href: string
22 | icon: React.ComponentProps
26 |
27 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/apps/docs/src/components/Search.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import {
4 | forwardRef,
5 | Fragment,
6 | Suspense,
7 | useCallback,
8 | useEffect,
9 | useId,
10 | useRef,
11 | useState,
12 | } from 'react'
13 | import Highlighter from 'react-highlight-words'
14 | import { usePathname, useRouter, useSearchParams } from 'next/navigation'
15 | import {
16 | type AutocompleteApi,
17 | type AutocompleteCollection,
18 | type AutocompleteState,
19 | createAutocomplete,
20 | } from '@algolia/autocomplete-core'
21 | import { Dialog, DialogPanel } from '@headlessui/react'
22 | import clsx from 'clsx'
23 |
24 | import { navigation } from '@/lib/navigation'
25 | import { type Result } from '@/markdoc/search.mjs'
26 |
27 | type EmptyObject = Record
28 |
39 | 30 | 31 | 32 | {title} 33 | 34 |
35 |36 | {description} 37 |
38 |225 | No results for “ 226 | 227 | {query} 228 | 229 | ” 230 |
231 | ) 232 | } 233 | 234 | return ( 235 |-
236 | {collection.items.map((result) => (
237 |
261 |
294 | )
295 | })
296 |
297 | function CloseOnNavigation({
298 | close,
299 | autocomplete,
300 | }: {
301 | close: (autocomplete: Autocomplete) => void
302 | autocomplete: Autocomplete
303 | }) {
304 | let pathname = usePathname()
305 | let searchParams = useSearchParams()
306 |
307 | useEffect(() => {
308 | close(autocomplete)
309 | }, [pathname, searchParams, close, autocomplete])
310 |
311 | return null
312 | }
313 |
314 | function SearchDialog({
315 | open,
316 | setOpen,
317 | className,
318 | }: {
319 | open: boolean
320 | setOpen: (open: boolean) => void
321 | className?: string
322 | }) {
323 | let formRef = useRef
290 |
292 | )}
293 |
66 |
117 |
118 | )
119 | }
120 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ThemeSelector.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { useTheme } from 'next-themes'
3 | import {
4 | Label,
5 | Listbox,
6 | ListboxButton,
7 | ListboxOption,
8 | ListboxOptions,
9 | } from '@headlessui/react'
10 | import clsx from 'clsx'
11 |
12 | const themes = [
13 | { name: 'Light', value: 'light', icon: LightIcon },
14 | { name: 'Dark', value: 'dark', icon: DarkIcon },
15 | { name: 'System', value: 'system', icon: SystemIcon },
16 | ]
17 |
18 | function LightIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
19 | return (
20 |
27 | )
28 | }
29 |
30 | function DarkIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
31 | return (
32 |
39 | )
40 | }
41 |
42 | function SystemIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
43 | return (
44 |
51 | )
52 | }
53 |
54 | export function ThemeSelector(
55 | props: React.ComponentPropsWithoutRef
108 |
117 | {theme.name}
118 |
119 | )}
120 |
39 | {!pdfDocument && Loading...}
40 |
41 | {Boolean(pdfDocument && pdfDocument.numPages) && (
42 |
59 | )}
60 |
61 | );
62 | };
63 | ```
64 |
65 | ## Props
66 |
67 | When you call usePdf you'll want to pass in a subset of these props, like this:
68 |
69 | > `const { pdfDocument, pdfPage } = usePdf({ canvasRef, file: 'https://example.com/test.pdf', page });`
70 |
71 | ### canvasRef
72 |
73 | A reference to the canvas element. Create with:
74 |
75 | > `const canvasRef = useRef(null);`
76 |
77 | and then render it like:
78 |
79 | > ``
80 |
81 | and then pass it into usePdf.
82 |
83 | ### file
84 |
85 | URL of the PDF file.
86 |
87 | ### onDocumentLoadSuccess
88 |
89 | Allows you to specify a callback that is called when the PDF document data will be fully loaded.
90 | Callback is called with [PDFDocumentProxy](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L579)
91 | as an only argument.
92 |
93 | ### onDocumentLoadFail
94 |
95 | Allows you to specify a callback that is called after an error occurred during PDF document data loading.
96 |
97 | ### onPageLoadSuccess
98 |
99 | Allows you to specify a callback that is called when the PDF page data will be fully loaded.
100 | Callback is called with [PDFPageProxy](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L897)
101 | as an only argument.
102 |
103 | ### onPageLoadFail
104 |
105 | Allows you to specify a callback that is called after an error occurred during PDF page data loading.
106 |
107 | ### onPageRenderSuccess
108 |
109 | Allows you to specify a callback that is called when the PDF page will be fully rendered into the DOM.
110 | Callback is called with [PDFPageProxy](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L897)
111 | as an only argument.
112 |
113 | ### onPageRenderFail
114 |
115 | Allows you to specify a callback that is called after an error occurred during PDF page rendering.
116 |
117 | ### page
118 |
119 | Specify the page that you want to display. Default = 1,
120 |
121 | ### scale
122 |
123 | Allows you to scale the PDF. Default = 1.
124 |
125 | ### rotate
126 |
127 | Allows you to rotate the PDF. Number is in degrees. Default = 0.
128 |
129 | ### cMapUrl
130 |
131 | Allows you to specify a cmap url. Default = '../node_modules/pdfjs-dist/cmaps/'.
132 |
133 | ### cMapPacked
134 |
135 | Allows you to specify whether the cmaps are packed or not. Default = false.
136 |
137 | ### workerSrc
138 |
139 | Allows you to specify a custom pdf worker url. Default = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/\${pdfjs.version}/pdf.worker.js'.
140 |
141 | ### withCredentials
142 |
143 | Allows you to add the withCredentials flag. Default = false.
144 |
145 | ## Returned values
146 |
147 | ### pdfDocument
148 |
149 | `pdfjs`'s `PDFDocumentProxy` [object](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L579).
150 | This can be undefined if document has not been loaded yet.
151 |
152 | ### pdfPage
153 |
154 | `pdfjs`'s `PDFPageProxy` [object](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L897)
155 | This can be undefined if page has not been loaded yet.
156 |
157 | # License
158 |
159 | MIT © [mikecousins](https://github.com/mikecousins)
160 |
--------------------------------------------------------------------------------
/packages/react-pdf-js/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@mikecousins/react-pdf",
3 | "version": "8.0.1",
4 | "description": "Simple React component to wrap up PDF.js. The easiest way to render PDFs in your React app.",
5 | "author": "mikecousins",
6 | "license": "MIT",
7 | "sideEffects": false,
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/mikecousins/react-pdf-js.git"
11 | },
12 | "type": "module",
13 | "files": [
14 | "dist"
15 | ],
16 | "main": "./dist/index.js",
17 | "types": "./dist/index.d.ts",
18 | "exports": {
19 | ".": {
20 | "import": {
21 | "types": "./dist/index.d.ts",
22 | "default": "./dist/index.js"
23 | },
24 | "require": {
25 | "types": "./dist/index.d.cts",
26 | "default": "./dist/index.cjs"
27 | }
28 | }
29 | },
30 | "scripts": {
31 | "build": "tsup src/index.tsx --dts --format esm,cjs",
32 | "lint": "eslint"
33 | },
34 | "prettier": {
35 | "printWidth": 80,
36 | "semi": true,
37 | "singleQuote": true,
38 | "trailingComma": "es5"
39 | },
40 | "devDependencies": {
41 | "@testing-library/react": "^16.2.0",
42 | "@types/jest": "^29.5.14",
43 | "@types/react": "^19.0.12",
44 | "@types/react-dom": "^19.0.4",
45 | "@vitejs/plugin-react": "^4.3.4",
46 | "jest-canvas-mock": "^2.5.2",
47 | "pdfjs-dist": "^5.0.375",
48 | "tsup": "^8.4.0",
49 | "typescript": "^5.8.2"
50 | },
51 | "peerDependencies": {
52 | "pdfjs-dist": "^5",
53 | "react": "^19",
54 | "react-dom": "^19"
55 | },
56 | "bundleDependencies": []
57 | }
58 |
--------------------------------------------------------------------------------
/packages/react-pdf-js/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useRef } from 'react';
2 | import { GlobalWorkerOptions, getDocument, version } from 'pdfjs-dist';
3 | import type { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist';
4 | import type { DocumentInitParameters } from 'pdfjs-dist/types/src/display/api';
5 |
6 | function isFunction(value: any): value is Function {
7 | return typeof value === 'function';
8 | }
9 |
10 | type PDFRenderTask = ReturnType
37 | {canvas}
38 |
40 | )}
41 | Test
39 |