{"_id":"@chenbri/pdf-prompt-fix","name":"@chenbri/pdf-prompt-fix","dist-tags":{"latest":"9.1.2"},"versions":{"9.1.2":{"name":"@chenbri/pdf-prompt-fix","version":"9.1.2","description":"x","type":"module","sideEffects":["*.css"],"main":"./dist/cjs/index.js","module":"./dist/esm/index.js","source":"./src/index.ts","types":"./dist/cjs/index.d.ts","exports":{".":{"import":"./dist/esm/index.js","require":"./dist/cjs/index.js"},"./dist/Page/AnnotationLayer.css":{"import":"./dist/esm/Page/AnnotationLayer.css","require":"./dist/cjs/Page/AnnotationLayer.css"},"./dist/Page/TextLayer.css":{"import":"./dist/esm/Page/TextLayer.css","require":"./dist/cjs/Page/TextLayer.css"},"./*":"./*"},"scripts":{"build":"yarn build-js && yarn copy-styles","build-js":"yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package","build-js-esm":"tsc --project tsconfig.build.json --outDir dist/esm","build-js-cjs":"tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --moduleResolution node --verbatimModuleSyntax false","build-js-cjs-package":"echo '{\n \"type\": \"commonjs\"\n}' > dist/cjs/package.json","copy-styles":"cpy 'src/**/*.css' dist/esm && cpy 'src/**/*.css' dist/cjs","format":"biome format","lint":"biome lint","test":"yarn lint && yarn tsc && yarn format && yarn unit","tsc":"tsc","unit":"vitest","watch":"yarn build-js-esm --watch & yarn build-js-cjs --watch & node --eval \"fs.watch('src', () => child_process.exec('yarn copy-styles'))\""},"keywords":["pdf","pdf-viewer","react"],"author":{"name":"Chen","email":"chen@surense.com"},"license":"MIT","dependencies":{"clsx":"^2.0.0","dequal":"^2.0.3","make-cancellable-promise":"^1.3.1","make-event-props":"^1.6.0","merge-refs":"^1.3.0","pdfjs-dist":"4.4.168","tiny-invariant":"^1.0.0","warning":"^4.0.0"},"devDependencies":{"@biomejs/biome":"1.9.0","@testing-library/dom":"^10.0.0","@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^16.0.0","@types/node":"*","@types/react":"*","@types/react-dom":"*","@types/warning":"^3.0.0","canvas":"^2.11.2","core-js":"^3.37.0","cpy-cli":"^5.0.0","jsdom":"^24.0.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^6.0.0","typescript":"^5.5.2","vitest":"^2.0.5"},"peerDependencies":{"@types/react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/wojtekmaj/react-pdf.git","directory":"packages/react-pdf"},"funding":"https://github.com/wojtekmaj/react-pdf?sponsor=1","_id":"@chenbri/pdf-prompt-fix@9.1.2","bugs":{"url":"https://github.com/wojtekmaj/react-pdf/issues"},"homepage":"https://github.com/wojtekmaj/react-pdf#readme","_nodeVersion":"22.11.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-PlJYA1hRF/ngQ+zPH5o/E1tqpSEB1uYPWUy4tTK+V944wwNYon9qoRs2kJc80L99tU/f2Z7tAXwAaDKVwNWPnw==","shasum":"441c4af38ec0335ff3b2cef46393969482becee6","tarball":"https://registry.npmjs.org/@chenbri/pdf-prompt-fix/-/pdf-prompt-fix-9.1.2.tgz","fileCount":167,"unpackedSize":551802,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCE0c9pDJWTdZTHEiGQqCB+GExhd+CHhKOZCAhFXIstfAIgF9InKHFv1r4F/SSa2nesg7RdMmd3JfQVDacZ/wki5kA="}]},"_npmUser":{"name":"chenbri","email":"chenbrilling@gmail.com"},"directories":{},"maintainers":[{"name":"chenbri","email":"chenbrilling@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pdf-prompt-fix_9.1.2_1733409607216_0.04355577380349085"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-05T14:40:07.110Z","9.1.2":"2024-12-05T14:40:07.460Z","modified":"2024-12-05T14:40:07.706Z"},"maintainers":[{"name":"chenbri","email":"chenbrilling@gmail.com"}],"description":"x","homepage":"https://github.com/wojtekmaj/react-pdf#readme","keywords":["pdf","pdf-viewer","react"],"repository":{"type":"git","url":"git+https://github.com/wojtekmaj/react-pdf.git","directory":"packages/react-pdf"},"author":{"name":"Chen","email":"chen@surense.com"},"bugs":{"url":"https://github.com/wojtekmaj/react-pdf/issues"},"license":"MIT","readme":"[![npm](https://img.shields.io/npm/v/react-pdf.svg)](https://www.npmjs.com/package/react-pdf) ![downloads](https://img.shields.io/npm/dt/react-pdf.svg) [![CI](https://github.com/wojtekmaj/react-pdf/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-pdf/actions)\n\n# React-PDF\n\nDisplay PDFs in your React app as easily as if they were images.\n\n## Lost?\n\nThis package is used to _display_ existing PDFs. If you wish to _create_ PDFs using React, you may be looking for [@react-pdf/renderer](https://www.npmjs.com/package/@react-pdf/renderer).\n\n## tl;dr\n\n- Install by executing `npm install react-pdf` or `yarn add react-pdf`.\n- Import by adding `import { Document } from 'react-pdf'`.\n- Use by adding ``. `file` can be a URL, base64 content, Uint8Array, and more.\n- Put `` components inside `` to render pages.\n\n## Demo\n\nA minimal demo page can be found in `sample` directory.\n\n[Online demo](https://projects.wojtekmaj.pl/react-pdf/) is also available!\n\n## Before you continue\n\nReact-PDF is under constant development. This documentation is written for React-PDF 9.x branch. If you want to see documentation for other versions of React-PDF, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch:\n\n- [v8.x](https://github.com/wojtekmaj/react-pdf/blob/v8.x/packages/react-pdf/README.md)\n- [v7.x](https://github.com/wojtekmaj/react-pdf/blob/v7.x/packages/react-pdf/README.md)\n- [v6.x](https://github.com/wojtekmaj/react-pdf/blob/v6.x/README.md)\n- [v5.x](https://github.com/wojtekmaj/react-pdf/blob/v5.x/README.md)\n- [v4.x](https://github.com/wojtekmaj/react-pdf/blob/v4.x/README.md)\n- [v3.x](https://github.com/wojtekmaj/react-pdf/blob/v3.x/README.md)\n- [v2.x](https://github.com/wojtekmaj/react-pdf/blob/v2.x/README.md)\n- [v1.x](https://github.com/wojtekmaj/react-pdf/blob/v1.x/README.md)\n\n## Getting started\n\n### Compatibility\n\n#### Browser support\n\nReact-PDF supports all modern browsers. It is tested with the latest versions of Chrome, Edge, Safari, Firefox, and Opera.\n\nThe following browsers are supported out of the box in React-PDF v9:\n\n- Chrome ≥119\n- Edge ≥119\n- Safari ≥17.4\n- Firefox ≥121\n\nYou may extend the list of supported browsers by providing additional polyfills (e.g. for `Array.prototype.at`, `Promise.allSettled` or `Promise.withResolvers`) and either configuring your bundler to transpile `pdfjs-dist` or using [legacy PDF.js worker](#legacy-pdfjs-worker).\n\nIf you need to support older browsers, you will need to use React-PDF v6 or earlier.\n\n#### React\n\nTo use the latest version of React-PDF, your project needs to use React 16.8 or later.\n\nIf you use an older version of React, please refer to the table below to a find suitable React-PDF version.\n\n| React version | Newest compatible React-PDF version |\n| ------------- | ----------------------------------- |\n| ≥16.8 | latest |\n| ≥16.3 | 5.x |\n| ≥15.5 | 4.x |\n\n#### Preact\n\nReact-PDF may be used with Preact.\n\n### Installation\n\nAdd React-PDF to your project by executing `npm install react-pdf` or `yarn add react-pdf`.\n\n#### Next.js\n\nIf you use Next.js without Turbopack enabled, add the following to your `next.config.js`:\n\n```diff\nmodule.exports = {\n+ webpack: (config) => {\n+ config.resolve.alias.canvas = false;\n\n+ return config;\n+ },\n}\n```\n\nIf you use Next.js with Turbopack enabled, add `empty-module.ts` file:\n\n```ts\nexport default {};\n```\n\nand add the following to your `next.config.js`:\n\n```diff\nmodule.exports = {\n+ experimental: {\n+ turbo: {\n+ resolveAlias: {\n+ canvas: './empty-module.ts',\n+ },\n+ },\n+ },\n};\n```\n\n### Configure PDF.js worker\n\nFor React-PDF to work, PDF.js worker needs to be provided. You have several options.\n\n#### Import worker (recommended)\n\nFor most cases, the following example will work:\n\n```ts\nimport { pdfjs } from 'react-pdf';\n\npdfjs.GlobalWorkerOptions.workerSrc = new URL(\n 'pdfjs-dist/build/pdf.worker.min.mjs',\n import.meta.url,\n).toString();\n```\n\n> [!NOTE]\n> In Next.js:\n>\n> - Using App Router, make sure to add `'use client';` to the top of the file.\n> - Using Pages Router, make sure to [disable SSR](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr) when importing the component you're using this code in.\n\n> [!NOTE]\n> pnpm requires an `.npmrc` file with `public-hoist-pattern[]=pdfjs-dist` for this to work.\n\n
\nSee more examples\n\n##### Parcel 2\n\nFor Parcel 2, you need to use a slightly different code:\n\n```diff\n pdfjs.GlobalWorkerOptions.workerSrc = new URL(\n- 'pdfjs-dist/build/pdf.worker.min.mjs',\n+ 'npm:pdfjs-dist/build/pdf.worker.min.mjs',\n import.meta.url,\n ).toString();\n```\n\n
\n\n#### Copy worker to public directory\n\nYou will have to make sure on your own that `pdf.worker.mjs` file from `pdfjs-dist/build` is copied to your project's output folder.\n\nFor example, you could use a custom script like:\n\n```ts\nimport path from 'node:path';\nimport fs from 'node:fs';\n\nconst pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));\nconst pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.mjs');\n\nfs.cpSync(pdfWorkerPath, './dist/pdf.worker.mjs', { recursive: true });\n```\n\n#### Use external CDN\n\n```ts\nimport { pdfjs } from 'react-pdf';\n\npdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;\n```\n\n#### Legacy PDF.js worker\n\nIf you need to support older browsers, you may use legacy PDF.js worker. To do so, follow the instructions above, but replace `/build/` with `legacy/build/` in PDF.js worker import path, for example:\n\n```diff\n pdfjs.GlobalWorkerOptions.workerSrc = new URL(\n- 'pdfjs-dist/build/pdf.worker.min.mjs',\n+ 'pdfjs-dist/legacy/build/pdf.worker.min.mjs',\n import.meta.url,\n ).toString();\n```\n\nor:\n\n```diff\n-pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;\n+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;\n```\n\n### Usage\n\nHere's an example of basic usage:\n\n```tsx\nimport { useState } from 'react';\nimport { Document, Page } from 'react-pdf';\n\nfunction MyApp() {\n const [numPages, setNumPages] = useState();\n const [pageNumber, setPageNumber] = useState(1);\n\n function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {\n setNumPages(numPages);\n }\n\n return (\n
\n \n \n \n

\n Page {pageNumber} of {numPages}\n

\n
\n );\n}\n```\n\nCheck the [sample directory](https://github.com/wojtekmaj/react-pdf/tree/main/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-pdf/wiki/Recipes) in [React-PDF Wiki](https://github.com/wojtekmaj/react-pdf/wiki/).\n\n### Support for annotations\n\nIf you want to use annotations (e.g. links) in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for annotations to be correctly displayed like so:\n\n```ts\nimport 'react-pdf/dist/Page/AnnotationLayer.css';\n```\n\n### Support for text layer\n\nIf you want to use text layer in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for text layer to be correctly displayed like so:\n\n```ts\nimport 'react-pdf/dist/Page/TextLayer.css';\n```\n\n### Support for non-latin characters\n\nIf you want to ensure that PDFs with non-latin characters will render perfectly, or you have encountered the following warning:\n\n```\nWarning: The CMap \"baseUrl\" parameter must be specified, ensure that the \"cMapUrl\" and \"cMapPacked\" API parameters are provided.\n```\n\nthen you would also need to include cMaps in your build and tell React-PDF where they are.\n\n#### Copying cMaps\n\nFirst, you need to copy cMaps from `pdfjs-dist` (React-PDF's dependency - it should be in your `node_modules` if you have React-PDF installed). cMaps are located in `pdfjs-dist/cmaps`.\n\n##### Vite\n\nAdd [`vite-plugin-static-copy`](https://www.npmjs.com/package/vite-plugin-static-copy) by executing `npm install vite-plugin-static-copy --save-dev` or `yarn add vite-plugin-static-copy --dev` and add the following to your Vite config:\n\n```diff\n+import path from 'node:path';\n+import { createRequire } from 'node:module';\n\n-import { defineConfig } from 'vite';\n+import { defineConfig, normalizePath } from 'vite';\n+import { viteStaticCopy } from 'vite-plugin-static-copy';\n\n+const require = createRequire(import.meta.url);\n+\n+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));\n+const cMapsDir = normalizePath(path.join(pdfjsDistPath, 'cmaps'));\n\nexport default defineConfig({\n plugins: [\n+ viteStaticCopy({\n+ targets: [\n+ {\n+ src: cMapsDir,\n+ dest: '',\n+ },\n+ ],\n+ }),\n ]\n});\n```\n\n##### Webpack\n\nAdd [`copy-webpack-plugin`](https://www.npmjs.com/package/copy-webpack-plugin) by executing `npm install copy-webpack-plugin --save-dev` or `yarn add copy-webpack-plugin --dev` and add the following to your Webpack config:\n\n```diff\n+import path from 'node:path';\n+import CopyWebpackPlugin from 'copy-webpack-plugin';\n\n+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));\n+const cMapsDir = path.join(pdfjsDistPath, 'cmaps');\n\nmodule.exports = {\n plugins: [\n+ new CopyWebpackPlugin({\n+ patterns: [\n+ {\n+ from: cMapsDir,\n+ to: 'cmaps/'\n+ },\n+ ],\n+ }),\n ],\n};\n```\n\n##### Other tools\n\nIf you use other bundlers, you will have to make sure on your own that cMaps are copied to your project's output folder.\n\nFor example, you could use a custom script like:\n\n```ts\nimport path from 'node:path';\nimport fs from 'node:fs';\n\nconst pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));\nconst cMapsDir = path.join(pdfjsDistPath, 'cmaps');\n\nfs.cpSync(cMapsDir, 'dist/cmaps/', { recursive: true });\n```\n\n#### Setting up React-PDF\n\nNow that you have cMaps in your build, pass required options to Document component by using `options` prop, like so:\n\n```ts\n// Outside of React component\nconst options = {\n cMapUrl: '/cmaps/',\n};\n\n// Inside of React component\n;\n```\n\n> [!NOTE]\n> Make sure to define `options` object outside of your React component, and use `useMemo` if you can't.\n\nAlternatively, you could use cMaps from external CDN:\n\n```tsx\n// Outside of React component\nimport { pdfjs } from 'react-pdf';\n\nconst options = {\n cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,\n};\n\n// Inside of React component\n;\n```\n\n### Support for standard fonts\n\nIf you want to support PDFs using standard fonts (deprecated in PDF 1.5, but still around), ot you have encountered the following warning:\n\n```\nThe standard font \"baseUrl\" parameter must be specified, ensure that the \"standardFontDataUrl\" API parameter is provided.\n```\n\nthen you would also need to include standard fonts in your build and tell React-PDF where they are.\n\n#### Copying fonts\n\nFirst, you need to copy standard fonts from `pdfjs-dist` (React-PDF's dependency - it should be in your `node_modules` if you have React-PDF installed). Standard fonts are located in `pdfjs-dist/standard_fonts`.\n\n##### Vite\n\nAdd [`vite-plugin-static-copy`](https://www.npmjs.com/package/vite-plugin-static-copy) by executing `npm install vite-plugin-static-copy --save-dev` or `yarn add vite-plugin-static-copy --dev` and add the following to your Vite config:\n\n```diff\n+import path from 'node:path';\n+import { createRequire } from 'node:module';\n\n-import { defineConfig } from 'vite';\n+import { defineConfig, normalizePath } from 'vite';\n+import { viteStaticCopy } from 'vite-plugin-static-copy';\n\n+const require = createRequire(import.meta.url);\n+const standardFontsDir = normalizePath(\n+ path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts')\n+);\n\nexport default defineConfig({\n plugins: [\n+ viteStaticCopy({\n+ targets: [\n+ {\n+ src: standardFontsDir,\n+ dest: '',\n+ },\n+ ],\n+ }),\n ]\n});\n```\n\n##### Webpack\n\nAdd [`copy-webpack-plugin`](https://www.npmjs.com/package/copy-webpack-plugin) by executing `npm install copy-webpack-plugin --save-dev` or `yarn add copy-webpack-plugin --dev` and add the following to your Webpack config:\n\n```diff\n+import path from 'node:path';\n+import CopyWebpackPlugin from 'copy-webpack-plugin';\n\n+const standardFontsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts');\n\nmodule.exports = {\n plugins: [\n+ new CopyWebpackPlugin({\n+ patterns: [\n+ {\n+ from: standardFontsDir,\n+ to: 'standard_fonts/'\n+ },\n+ ],\n+ }),\n ],\n};\n```\n\n##### Other tools\n\nIf you use other bundlers, you will have to make sure on your own that standard fonts are copied to your project's output folder.\n\nFor example, you could use a custom script like:\n\n```ts\nimport path from 'node:path';\nimport fs from 'node:fs';\n\nconst pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));\nconst standardFontsDir = path.join(pdfjsDistPath, 'standard_fonts');\n\nfs.cpSync(standardFontsDir, 'dist/standard_fonts/', { recursive: true });\n```\n\n#### Setting up React-PDF\n\nNow that you have standard fonts in your build, pass required options to Document component by using `options` prop, like so:\n\n```tsx\n// Outside of React component\nconst options = {\n standardFontDataUrl: '/standard_fonts/',\n};\n\n// Inside of React component\n;\n```\n\n> [!NOTE]\n> Make sure to define `options` object outside of your React component, and use `useMemo` if you can't.\n\nAlternatively, you could use standard fonts from external CDN:\n\n```tsx\n// Outside of React component\nimport { pdfjs } from 'react-pdf';\n\nconst options = {\n standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts`,\n};\n\n// Inside of React component\n;\n```\n\n## User guide\n\n### Document\n\nLoads a document passed using `file` prop.\n\n#### Props\n\n| Prop name | Description | Default value | Example values |\n| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | Class name(s) that will be added to rendered element along with the default `react-pdf__Document`. | n/a |
  • String:
    `\"custom-class-name-1 custom-class-name-2\"`
  • Array of strings:
    `[\"custom-class-name-1\", \"custom-class-name-2\"]`
|\n| error | What the component should display in case of an error. | `\"Failed to load PDF file.\"` |
  • String:
    `\"An error occurred!\"`
  • React element:
    `

    An error occurred!

    `
  • Function:
    `this.renderError`
|\n| externalLinkRel | Link rel for links rendered in annotations. | `\"noopener noreferrer nofollow\"` | One of valid [values for `rel` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel).
  • `\"noopener\"`
  • `\"noreferrer\"`
  • `\"nofollow\"`
  • `\"noopener noreferrer\"`
|\n| externalLinkTarget | Link target for external links rendered in annotations. | unset, which means that default behavior will be used | One of valid [values for `target` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target).
  • `\"_self\"`
  • `\"_blank\"`
  • `\"_parent\"`
  • `\"_top\"`
|\n| file | What PDF should be displayed.
Its value can be an URL, a file (imported using `import … from …` or from file input form element), or an object with parameters (`url` - URL; `data` - data, preferably Uint8Array; `range` - PDFDataRangeTransport.
**Warning**: Since equality check (`===`) is used to determine if `file` object has changed, it must be memoized by setting it in component's state, `useMemo` or other similar technique. | n/a |
  • URL:
    `\"https://example.com/sample.pdf\"`
  • File:
    `import importedPdf from '../static/sample.pdf'` and then
    `sample`
  • Parameter object:
    `{ url: 'https://example.com/sample.pdf' }`
|\n| imageResourcesPath | The path used to prefix the src attributes of annotation SVGs. | n/a (pdf.js will fallback to an empty string) | `\"/public/images/\"` |\n| inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `
` rendered by `` component. | n/a |
  • Function:
    `(ref) => { this.myDocument = ref; }`
  • Ref created using `createRef`:
    `this.ref = createRef();`
    …
    `inputRef={this.ref}`
  • Ref created using `useRef`:
    `const ref = useRef();`
    …
    `inputRef={ref}`
|\n| loading | What the component should display while loading. | `\"Loading PDF…\"` |
  • String:
    `\"Please wait!\"`
  • React element:
    `

    Please wait!

    `
  • Function:
    `this.renderLoader`
|\n| noData | What the component should display in case of no data. | `\"No PDF file specified.\"` |
  • String:
    `\"Please select a file.\"`
  • React element:
    `

    Please select a file.

    `
  • Function:
    `this.renderNoData`
|\n| onItemClick | Function called when an outline item or a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. | n/a | `({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')` |\n| onLoadError | Function called in case of an error while loading a document. | n/a | `(error) => alert('Error while loading document! ' + error.message)` |\n| onLoadProgress | Function called, potentially multiple times, as the loading progresses. | n/a | `({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%')` |\n| onLoadSuccess | Function called when the document is successfully loaded. | n/a | `(pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')` |\n| onPassword | Function called when a password-protected PDF is loaded. | Function that prompts the user for password. | `(callback) => callback('s3cr3t_p4ssw0rd')` |\n| onSourceError | Function called in case of an error while retrieving document source from `file` prop. | n/a | `(error) => alert('Error while retrieving document source! ' + error.message)` |\n| onSourceSuccess | Function called when document source is successfully retrieved from `file` prop. | n/a | `() => alert('Document source retrieved!')` |\n| options | An object in which additional parameters to be passed to PDF.js can be defined. Most notably:
  • `cMapUrl`;
  • `httpHeaders` - custom request headers, e.g. for authorization);
  • `withCredentials` - a boolean to indicate whether or not to include cookies in the request (defaults to `false`)
For a full list of possible parameters, check [PDF.js documentation on DocumentInitParameters](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters).

**Note**: Make sure to define options object outside of your React component, and use `useMemo` if you can't. | n/a | `{ cMapUrl: '/cmaps/' }` |\n| renderMode | Rendering mode of the document. Can be `\"canvas\"`, `\"custom\"` or `\"none\"`. If set to `\"custom\"`, `customRenderer` must also be provided. | `\"canvas\"` | `\"custom\"` |\n| rotate | Rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given `rotate` prop of their own. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left. | n/a | `90` |\n\n### Page\n\nDisplays a page. Should be placed inside ``. Alternatively, it can have `pdf` prop passed, which can be obtained from ``'s `onLoadSuccess` callback function, however some advanced functions like rendering annotations and linking between pages inside a document may not be working correctly.\n\n#### Props\n\n| Prop name | Description | Default value | Example values |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| canvasBackground | Canvas background color. Any valid `canvas.fillStyle` can be used. | n/a | `\"transparent\"` |\n| canvasRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `` rendered by `` component. | n/a |
  • Function:
    `(ref) => { this.myCanvas = ref; }`
  • Ref created using `createRef`:
    `this.ref = createRef();`
    …
    `inputRef={this.ref}`
  • Ref created using `useRef`:
    `const ref = useRef();`
    …
    `inputRef={ref}`
|\n| className | Class name(s) that will be added to rendered element along with the default `react-pdf__Page`. | n/a |
  • String:
    `\"custom-class-name-1 custom-class-name-2\"`
  • Array of strings:
    `[\"custom-class-name-1\", \"custom-class-name-2\"]`
|\n| customRenderer | Function that customizes how a page is rendered. You must set `renderMode` to `\"custom\"` to use this prop. | n/a | `MyCustomRenderer` |\n| customTextRenderer | Function that customizes how a text layer is rendered. | n/a | ``({ str, itemIndex }) => str.replace(/ipsum/g, value => `${value}`)`` |\n| devicePixelRatio | The ratio between physical pixels and device-independent pixels (DIPs) on the current device. | `window.devicePixelRatio` | `1` |\n| error | What the component should display in case of an error. | `\"Failed to load the page.\"` |
  • String:
    `\"An error occurred!\"`
  • React element:
    `

    An error occurred!

    `
  • Function:
    `this.renderError`
|\n| height | Page height. If neither `height` nor `width` are defined, page will be rendered at the size defined in PDF. If you define `width` and `height` at the same time, `height` will be ignored. If you define `height` and `scale` at the same time, the height will be multiplied by a given factor. | Page's default height | `300` |\n| imageResourcesPath | The path used to prefix the src attributes of annotation SVGs. | n/a (pdf.js will fallback to an empty string) | `\"/public/images/\"` |\n| inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `
` rendered by `` component. | n/a |
  • Function:
    `(ref) => { this.myPage = ref; }`
  • Ref created using `createRef`:
    `this.ref = createRef();`
    …
    `inputRef={this.ref}`
  • Ref created using `useRef`:
    `const ref = useRef();`
    …
    `inputRef={ref}`
|\n| loading | What the component should display while loading. | `\"Loading page…\"` |
  • String:
    `\"Please wait!\"`
  • React element:
    `

    Please wait!

    `
  • Function:
    `this.renderLoader`
|\n| noData | What the component should display in case of no data. | `\"No page specified.\"` |
  • String:
    `\"Please select a page.\"`
  • React element:
    `

    Please select a page.

    `
  • Function:
    `this.renderNoData`
|\n| onGetAnnotationsError | Function called in case of an error while loading annotations. | n/a | `(error) => alert('Error while loading annotations! ' + error.message)` |\n| onGetAnnotationsSuccess | Function called when annotations are successfully loaded. | n/a | `(annotations) => alert('Now displaying ' + annotations.length + ' annotations!')` |\n| onGetStructTreeError | Function called in case of an error while loading structure tree. | n/a | `(error) => alert('Error while loading structure tree! ' + error.message)` |\n| onGetStructTreeSuccess | Function called when structure tree is successfully loaded. | n/a | `(structTree) => alert(JSON.stringify(structTree))` |\n| onGetTextError | Function called in case of an error while loading text layer items. | n/a | `(error) => alert('Error while loading text layer items! ' + error.message)` |\n| onGetTextSuccess | Function called when text layer items are successfully loaded. | n/a | `({ items, styles }) => alert('Now displaying ' + items.length + ' text layer items!')` |\n| onLoadError | Function called in case of an error while loading the page. | n/a | `(error) => alert('Error while loading page! ' + error.message)` |\n| onLoadSuccess | Function called when the page is successfully loaded. | n/a | `(page) => alert('Now displaying a page number ' + page.pageNumber + '!')` |\n| onRenderAnnotationLayerError | Function called in case of an error while rendering the annotation layer. | n/a | `(error) => alert('Error while loading annotation layer! ' + error.message)` |\n| onRenderAnnotationLayerSuccess | Function called when annotations are successfully rendered on the screen. | n/a | `() => alert('Rendered the annotation layer!')` |\n| onRenderError | Function called in case of an error while rendering the page. | n/a | `(error) => alert('Error while loading page! ' + error.message)` |\n| onRenderSuccess | Function called when the page is successfully rendered on the screen. | n/a | `() => alert('Rendered the page!')` |\n| onRenderTextLayerError | Function called in case of an error while rendering the text layer. | n/a | `(error) => alert('Error while rendering text layer! ' + error.message)` |\n| onRenderTextLayerSuccess | Function called when the text layer is successfully rendered on the screen. | n/a | `() => alert('Rendered the text layer!')` |\n| pageIndex | Which page from PDF file should be displayed, by page index. Ignored if `pageNumber` prop is provided. | `0` | `1` |\n| pageNumber | Which page from PDF file should be displayed, by page number. If provided, `pageIndex` prop will be ignored. | `1` | `2` |\n| pdf | pdf object obtained from ``'s `onLoadSuccess` callback function. | (automatically obtained from parent ``) | `pdf` |\n| renderAnnotationLayer | Whether annotations (e.g. links) should be rendered. | `true` | `false` |\n| renderForms | Whether forms should be rendered. `renderAnnotationLayer` prop must be set to `true`. | `false` | `true` |\n| renderMode | Rendering mode of the document. Can be `\"canvas\"`, `\"custom\"` or `\"none\"`. If set to `\"custom\"`, `customRenderer` must also be provided. | `\"canvas\"` | `\"custom\"` |\n| renderTextLayer | Whether a text layer should be rendered. | `true` | `false` |\n| rotate | Rotation of the page in degrees. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left. | Page's default setting, usually `0` | `90` |\n| scale | Page scale. | `1` | `0.5` |\n| width | Page width. If neither `height` nor `width` are defined, page will be rendered at the size defined in PDF. If you define `width` and `height` at the same time, `height` will be ignored. If you define `width` and `scale` at the same time, the width will be multiplied by a given factor. | Page's default width | `300` |\n\n### Outline\n\nDisplays an outline (table of contents). Should be placed inside ``. Alternatively, it can have `pdf` prop passed, which can be obtained from ``'s `onLoadSuccess` callback function.\n\n#### Props\n\n| Prop name | Description | Default value | Example values |\n| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | Class name(s) that will be added to rendered element along with the default `react-pdf__Outline`. | n/a |
  • String:
    `\"custom-class-name-1 custom-class-name-2\"`
  • Array of strings:
    `[\"custom-class-name-1\", \"custom-class-name-2\"]`
|\n| inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `
` rendered by `` component. | n/a |
  • Function:
    `(ref) => { this.myOutline = ref; }`
  • Ref created using `createRef`:
    `this.ref = createRef();`
    …
    `inputRef={this.ref}`
  • Ref created using `useRef`:
    `const ref = useRef();`
    …
    `inputRef={ref}`
|\n| onItemClick | Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. | n/a | `({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')` |\n| onLoadError | Function called in case of an error while retrieving the outline. | n/a | `(error) => alert('Error while retrieving the outline! ' + error.message)` |\n| onLoadSuccess | Function called when the outline is successfully retrieved. | n/a | `(outline) => alert('The outline has been successfully retrieved.')` |\n\n### Thumbnail\n\nDisplays a thumbnail of a page. Does not render the annotation layer or the text layer. Does not register itself as a link target, so the user will not be scrolled to a Thumbnail component when clicked on an internal link (e.g. in Table of Contents). When clicked, attempts to navigate to the page clicked (similarly to a link in Outline). Should be placed inside ``. Alternatively, it can have `pdf` prop passed, which can be obtained from ``'s `onLoadSuccess` callback function.\n\n#### Props\n\nProps are the same as in `` component, but certain annotation layer and text layer-related props are not available:\n\n- customTextRenderer\n- onGetAnnotationsError\n- onGetAnnotationsSuccess\n- onGetTextError\n- onGetTextSuccess\n- onRenderAnnotationLayerError\n- onRenderAnnotationLayerSuccess\n- onRenderTextLayerError\n- onRenderTextLayerSuccess\n- renderAnnotationLayer\n- renderForms\n- renderTextLayer\n\nOn top of that, additional props are available:\n\n| Prop name | Description | Default value | Example values |\n| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | Class name(s) that will be added to rendered element along with the default `react-pdf__Thumbnail`. | n/a |
  • String:
    `\"custom-class-name-1 custom-class-name-2\"`
  • Array of strings:
    `[\"custom-class-name-1\", \"custom-class-name-2\"]`
|\n| onItemClick | Function called when a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. | n/a | `({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')` |\n\n## Usefu","readmeFilename":"README.md"}