Socket
Socket
Sign inDemoInstall

react-pdf

Package Overview
Dependencies
105
Maintainers
1
Versions
143
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 6.0.0-beta.3 to 6.0.0-beta.4

dist/cjs/Document.js

4

dist/esm/Page.js

@@ -147,3 +147,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";

customTextRenderer = _this$props2.customTextRenderer,
enhanceTextSelection = _this$props2.enhanceTextSelection,
onGetAnnotationsError = _this$props2.onGetAnnotationsError,

@@ -164,3 +163,2 @@ onGetAnnotationsSuccess = _this$props2.onGetAnnotationsSuccess,

customTextRenderer: customTextRenderer,
enhanceTextSelection: enhanceTextSelection,
onGetAnnotationsError: onGetAnnotationsError,

@@ -418,3 +416,2 @@ onGetAnnotationsSuccess: onGetAnnotationsSuccess,

renderAnnotationLayer: true,
renderForms: false,
renderMode: 'canvas',

@@ -430,3 +427,2 @@ renderTextLayer: true,

customTextRenderer: PropTypes.func,
enhanceTextSelection: PropTypes.bool,
error: isFunctionOrNode,

@@ -433,0 +429,0 @@ height: PropTypes.number,

@@ -94,2 +94,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";

invariant(page, 'Attempted to load page annotations, but no page was specified.');
warning(parseInt(window.getComputedStyle(document.body).getPropertyValue('--react-pdf-annotation-layer'), 10) === 1, 'AnnotationLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-annotations');
this.loadAnnotations();

@@ -96,0 +97,0 @@ }

@@ -98,2 +98,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";

invariant(page, 'Attempted to load page text content, but no page was specified.');
warning(parseInt(window.getComputedStyle(document.body).getPropertyValue('--react-pdf-text-layer'), 10) === 1, 'TextLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-text-layer');
this.loadTextContent();

@@ -162,5 +163,3 @@ }

var viewport = this.viewport;
var _this$props4 = this.props,
customTextRenderer = _this$props4.customTextRenderer,
enhanceTextSelection = _this$props4.enhanceTextSelection; // If another rendering is in progress, let's cancel it
var customTextRenderer = this.props.customTextRenderer; // If another rendering is in progress, let's cancel it

@@ -170,3 +169,2 @@ cancelRunningTask(this.runningTask);

container: this.layerElement.current,
enhanceTextSelection: enhanceTextSelection,
textContent: textContent,

@@ -206,8 +204,4 @@ viewport: viewport

}(PureComponent);
TextLayerInternal.defaultProps = {
enhanceTextSelection: true
};
TextLayerInternal.propTypes = {
customTextRenderer: PropTypes.func,
enhanceTextSelection: PropTypes.bool,
onGetTextError: PropTypes.func,

@@ -214,0 +208,0 @@ onGetTextSuccess: PropTypes.func,

{
"name": "react-pdf",
"version": "6.0.0-beta.3",
"version": "6.0.0-beta.4",
"description": "Display PDFs in your React app as easily as if they were images.",
"main": "dist/umd/entry.js",
"main": "dist/cjs/entry.js",
"module": "dist/esm/entry.js",
"source": "src/entry.js",
"scripts": {
"build": "yarn build-js-all && yarn copy-styles",
"build-js-all": "yarn build-js-esm && yarn build-js-umd",
"build": "yarn build-js && yarn copy-styles",
"build-js": "yarn build-js-esm && yarn build-js-cjs",
"build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js,**/*.spec.jsx\"",
"build-js-umd": "BABEL_ENV=production-umd babel src -d dist/umd --ignore \"**/*.spec.js,**/*.spec.jsx\"",
"build-js-cjs": "BABEL_ENV=production-cjs babel src -d dist/cjs --ignore \"**/*.spec.js,**/*.spec.jsx\"",
"clean": "rimraf dist",
"copy-styles": "node ./copy-styles.js",
"jest": "jest",
"lint": "eslint sample/ src/ test/ --ext .jsx,.js",
"lint": "eslint sample src test --ext .jsx,.js",
"prepack": "yarn clean && yarn build",
"test": "yarn lint && yarn jest"
"prettier": "prettier --check . --cache",
"test": "yarn lint && yarn prettier && yarn jest"
},

@@ -29,44 +30,2 @@ "keywords": [

},
"contributors": [
{
"name": "Anenth",
"email": "anenthvishnu@gmail.com"
},
{
"name": "Artur Termenji",
"email": "atermenji@gmail.com"
},
{
"name": "Bart Van Houtte",
"email": "bart.van.houtte@ading.be"
},
{
"name": "Dmitry Ivakhnenko",
"email": "jeetiss@yandex.ru"
},
{
"name": "Felipe Lacerda",
"email": "fegolac@gmail.com"
},
{
"name": "Julia Kieserman",
"email": "kieserman.julia@gmail.com"
},
{
"name": "Lucas Simkins",
"email": "lucas.simkins@gmail.com"
},
{
"name": "Niklas Närhinen",
"email": "niklas@narhinen.net"
},
{
"name": "Robert Scott",
"email": "rs@robsco.info"
},
{
"name": "Thomas McCarthy",
"email": "tom@tomm.cc"
}
],
"license": "MIT",

@@ -79,3 +38,3 @@ "dependencies": {

"merge-refs": "^1.0.0",
"pdfjs-dist": "2.14.305",
"pdfjs-dist": "2.16.105",
"prop-types": "^15.6.2",

@@ -94,7 +53,8 @@ "tiny-invariant": "^1.0.0",

"eslint": "^8.5.0",
"eslint-config-wojtekmaj": "^0.6.5",
"eslint-config-wojtekmaj": "^0.7.1",
"husky": "^8.0.0",
"jest": "^27.0.0",
"jest": "^29.0.0",
"jest-canvas-mock": "^2.3.1",
"prettier": "^2.5.0",
"jest-environment-jsdom": "^29.0.0",
"prettier": "^2.7.0",
"pretty-quick": "^3.1.0",

@@ -101,0 +61,0 @@ "react": "^17.0.0",

@@ -117,3 +117,3 @@ [![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/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-pdf/actions) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

```js
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5';
```

@@ -128,2 +128,6 @@

#### Webpack 4
If you want to use React-PDF with Webpack 4, you'll need to manually install `file-loader` package.
#### Create React App

@@ -391,3 +395,3 @@

| options | An object in which additional parameters to be passed to PDF.js can be defined. 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). | n/a | `{ cMapUrl: 'cmaps/', cMapPacked: true }` |
| renderMode | Rendering mode of the document. Can be `"canvas"`, `"svg"` or `"none"`. | `"canvas"` | `"svg"` |
| renderMode | Rendering mode of the document. Can be `"canvas"`, `"svg"` or `"none"`.<br />**Warning**: SVG render mode is no longer maintained and may be removed in the future. | `"canvas"` | `"svg"` |
| 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` |

@@ -401,31 +405,33 @@

| Prop name | Description | Default value | Example values |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| canvasBackground | Canvas background color. Any valid `canvas.fillStyle` can be used. If you set `renderMode` to `"svg"` this prop will be ignored. | n/a | `"transparent"` |
| canvasRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `<canvas>` rendered by `<PageCanvas>` component. If you set `renderMode` to `"svg"` this prop will be ignored. | n/a | <ul><li>Function:<br />`(ref) => { this.myPage = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul> |
| className | Class name(s) that will be added to rendered element along with the default `react-pdf__Page`. | n/a | <ul><li>String:<br />`"custom-class-name-1 custom-class-name-2"`</li><li>Array of strings:<br />`["custom-class-name-1", "custom-class-name-2"]`</li></ul> |
| customTextRenderer | A function that customizes how a text layer is rendered. Passes itext item and index for item. | n/a | `({ str, itemIndex }) => { return (<mark>{str}</mark>) }` |
| error | What the component should display in case of an error. | `"Failed to load the page."` | <ul><li>String:<br />`"An error occurred!"`</li><li>React element:<br />`<div>An error occurred!</div>`</li><li>Function:<br />`this.renderError`</li></ul> |
| 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` |
| imageResourcesPath | The path used to prefix the src attributes of annotation SVGs. | n/a (pdf.js will fallback to an empty string) | `"/public/images/"` |
| inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Page>` component. | n/a | <ul><li>Function:<br />`(ref) => { this.myPage = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul> |
| loading | What the component should display while loading. | `"Loading page…"` | <ul><li>String:<br />`"Please wait!"`</li><li>React element:<br />`<div>Please wait!</div>`</li><li>Function:<br />`this.renderLoader`</li></ul> |
| noData | What the component should display in case of no data. | `"No page specified."` | <ul><li>String:<br />`"Please select a page."`</li><li>React element:<br />`<div>Please select a page.</div>`</li><li>Function:<br />`this.renderNoData`</li></ul> |
| onLoadError | Function called in case of an error while loading the page. | n/a | `(error) => alert('Error while loading page! ' + error.message)` |
| onLoadSuccess | Function called when the page is successfully loaded. | n/a | `(page) => alert('Now displaying a page number ' + page.pageNumber + '!')` |
| onRenderError | Function called in case of an error while rendering the page. | n/a | `(error) => alert('Error while loading page! ' + error.message)` |
| onRenderSuccess | Function called when the page is successfully rendered on the screen. | n/a | `() => alert('Rendered the page!')` |
| onGetAnnotationsSuccess | Function called when annotations are successfully loaded. | n/a | `(annotations) => alert('Now displaying ' + annotations.length + ' annotations!')` |
| onGetAnnotationsError | Function called in case of an error while loading annotations. | n/a | `(error) => alert('Error while loading annotations! ' + error.message)` |
| onGetTextSuccess | Function called when text layer items are successfully loaded. | n/a | `({ items, styles }) => alert('Now displaying ' + items.length + ' text layer items!')` |
| 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)` |
| pageIndex | Which page from PDF file should be displayed, by page index. | `0` | `1` |
| pageNumber | Which page from PDF file should be displayed, by page number. If provided, `pageIndex` prop will be ignored. | `1` | `2` |
| renderAnnotationLayer | Whether annotations (e.g. links) should be rendered. | `true` | `false` |
| renderForms | Whether forms should be rendered. `renderAnnotationLayer` prop must be set to `true`. | `false` | `true` |
| renderMode | Rendering mode of the document. Can be `"canvas"`, `"svg"` or `"none"`. | `"canvas"` | `"svg"` |
| renderTextLayer | Whether a text layer should be rendered. | `true` | `false` |
| 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` |
| scale | Page scale. | `1.0` | `0.5` |
| 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` |
| Prop name | Description | Default value | Example values |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| canvasBackground | Canvas background color. Any valid `canvas.fillStyle` can be used. If you set `renderMode` to `"svg"` this prop will be ignored. | n/a | `"transparent"` |
| canvasRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `<canvas>` rendered by `<PageCanvas>` component. If you set `renderMode` to `"svg"` this prop will be ignored. | n/a | <ul><li>Function:<br />`(ref) => { this.myPage = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul> |
| className | Class name(s) that will be added to rendered element along with the default `react-pdf__Page`. | n/a | <ul><li>String:<br />`"custom-class-name-1 custom-class-name-2"`</li><li>Array of strings:<br />`["custom-class-name-1", "custom-class-name-2"]`</li></ul> |
| customTextRenderer | A function that customizes how a text layer is rendered. Passes itext item and index for item. | n/a | `({ str, itemIndex }) => { return (<mark>{str}</mark>) }` |
| error | What the component should display in case of an error. | `"Failed to load the page."` | <ul><li>String:<br />`"An error occurred!"`</li><li>React element:<br />`<div>An error occurred!</div>`</li><li>Function:<br />`this.renderError`</li></ul> |
| 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` |
| imageResourcesPath | The path used to prefix the src attributes of annotation SVGs. | n/a (pdf.js will fallback to an empty string) | `"/public/images/"` |
| inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Page>` component. | n/a | <ul><li>Function:<br />`(ref) => { this.myPage = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul> |
| loading | What the component should display while loading. | `"Loading page…"` | <ul><li>String:<br />`"Please wait!"`</li><li>React element:<br />`<div>Please wait!</div>`</li><li>Function:<br />`this.renderLoader`</li></ul> |
| noData | What the component should display in case of no data. | `"No page specified."` | <ul><li>String:<br />`"Please select a page."`</li><li>React element:<br />`<div>Please select a page.</div>`</li><li>Function:<br />`this.renderNoData`</li></ul> |
| onLoadError | Function called in case of an error while loading the page. | n/a | `(error) => alert('Error while loading page! ' + error.message)` |
| onLoadSuccess | Function called when the page is successfully loaded. | n/a | `(page) => alert('Now displaying a page number ' + page.pageNumber + '!')` |
| onRenderError | Function called in case of an error while rendering the page. | n/a | `(error) => alert('Error while loading page! ' + error.message)` |
| onRenderSuccess | Function called when the page is successfully rendered on the screen. | n/a | `() => alert('Rendered the page!')` |
| onRenderTextLayerError | Function called in case of an error while rendering the text layer. | n/a | `(error) => alert('Error while loading page! ' + error.message)` |
| onRenderTextLayerSuccess | Function called when the text layer is successfully rendered on the screen. | n/a | `() => alert('Rendered the page!')` |
| onGetAnnotationsSuccess | Function called when annotations are successfully loaded. | n/a | `(annotations) => alert('Now displaying ' + annotations.length + ' annotations!')` |
| onGetAnnotationsError | Function called in case of an error while loading annotations. | n/a | `(error) => alert('Error while loading annotations! ' + error.message)` |
| onGetTextSuccess | Function called when text layer items are successfully loaded. | n/a | `({ items, styles }) => alert('Now displaying ' + items.length + ' text layer items!')` |
| 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)` |
| pageIndex | Which page from PDF file should be displayed, by page index. | `0` | `1` |
| pageNumber | Which page from PDF file should be displayed, by page number. If provided, `pageIndex` prop will be ignored. | `1` | `2` |
| renderAnnotationLayer | Whether annotations (e.g. links) should be rendered. | `true` | `false` |
| renderForms | Whether forms should be rendered. `renderAnnotationLayer` prop must be set to `true`. | `false` | `true` |
| renderMode | Rendering mode of the document. Can be `"canvas"`, `"svg"` or `"none"`. | `"canvas"` | `"svg"` |
| renderTextLayer | Whether a text layer should be rendered. | `true` | `false` |
| 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` |
| scale | Page scale. | `1.0` | `0.5` |
| 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` |

@@ -432,0 +438,0 @@ ### Outline

@@ -82,3 +82,2 @@ import React, { createRef, PureComponent } from 'react';

customTextRenderer,
enhanceTextSelection,
onGetAnnotationsError,

@@ -101,3 +100,2 @@ onGetAnnotationsSuccess,

customTextRenderer,
enhanceTextSelection,
onGetAnnotationsError,

@@ -372,3 +370,2 @@ onGetAnnotationsSuccess,

renderAnnotationLayer: true,
renderForms: false,
renderMode: 'canvas',

@@ -387,3 +384,2 @@ renderTextLayer: true,

customTextRenderer: PropTypes.func,
enhanceTextSelection: PropTypes.bool,
error: isFunctionOrNode,

@@ -390,0 +386,0 @@ height: PropTypes.number,

@@ -509,2 +509,73 @@ import React, { createRef } from 'react';

it('requests page to be rendered without forms by default', async () => {
const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
const instance = createRef();
render(<Page onLoadSuccess={onLoadSuccess} pageIndex={0} pdf={pdf} ref={instance} />);
expect.assertions(1);
await onLoadSuccessPromise;
expect(instance.current.childContext.renderForms).toBeFalsy();
});
it('requests page to be rendered with forms given renderForms = true', async () => {
const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
const instance = createRef();
render(
<Page onLoadSuccess={onLoadSuccess} pageIndex={0} pdf={pdf} ref={instance} renderForms />,
);
expect.assertions(1);
await onLoadSuccessPromise;
expect(instance.current.childContext.renderForms).toBe(true);
});
it('requests page to be rendered with forms given legacy renderInteractiveForms = true', async () => {
const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
const instance = createRef();
render(
<Page
onLoadSuccess={onLoadSuccess}
pageIndex={0}
pdf={pdf}
ref={instance}
renderInteractiveForms
/>,
);
expect.assertions(1);
await onLoadSuccessPromise;
expect(instance.current.childContext.renderForms).toBe(true);
});
it('requests page to be rendered without forms given renderForms = false and legacy renderInteractiveForms = true', async () => {
const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
const instance = createRef();
render(
<Page
onLoadSuccess={onLoadSuccess}
pageIndex={0}
pdf={pdf}
ref={instance}
renderForms={false}
renderInteractiveForms
/>,
);
expect.assertions(1);
await onLoadSuccessPromise;
expect(instance.current.childContext.renderForms).toBeFalsy();
});
it('requests page to be rendered at its original size given nothing', () => {

@@ -511,0 +582,0 @@ const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();

@@ -27,2 +27,10 @@ import React, { createRef, PureComponent } from 'react';

warning(
parseInt(
window.getComputedStyle(document.body).getPropertyValue('--react-pdf-annotation-layer'),
10,
) === 1,
'AnnotationLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-annotations',
);
this.loadAnnotations();

@@ -29,0 +37,0 @@ }

@@ -27,2 +27,10 @@ import React, { createRef, PureComponent } from 'react';

warning(
parseInt(
window.getComputedStyle(document.body).getPropertyValue('--react-pdf-text-layer'),
10,
) === 1,
'TextLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-text-layer',
);
this.loadTextContent();

@@ -118,3 +126,3 @@ }

const { viewport } = this;
const { customTextRenderer, enhanceTextSelection } = this.props;
const { customTextRenderer } = this.props;

@@ -126,3 +134,2 @@ // If another rendering is in progress, let's cancel it

container: this.layerElement.current,
enhanceTextSelection,
textContent,

@@ -165,9 +172,4 @@ viewport,

TextLayerInternal.defaultProps = {
enhanceTextSelection: true,
};
TextLayerInternal.propTypes = {
customTextRenderer: PropTypes.func,
enhanceTextSelection: PropTypes.bool,
onGetTextError: PropTypes.func,

@@ -174,0 +176,0 @@ onGetTextSuccess: PropTypes.func,

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc