Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-to-print
Advanced tools
react-to-print - npm Package Compare versions
Comparing version 2.9.0 to 2.10.0
| # CHANGELOG | ||
| ## 2.10.0 (August 23rd, 2020) | ||
| - FEATURE [272](https://github.com/gregnb/react-to-print/pull/272): a new prop `print` has been added. This can be used to override the default browser [`Window.print`](https://developer.mozilla.org/en-US/docs/Web/API/Window/print). This can be useful if you want to print in an alternative environment such as Electron. As part of this change, `onPrintError` will now report if an error occurs in a passed in `print` method. Thanks to [Ririshi](https://github.com/Ririshi) for this idea | ||
| - DOCS [269](https://github.com/gregnb/react-to-print/pull/269): added guidelines for how to achieve nice page breaks. Thanks [hbrannan](https://github.com/hbrannan) | ||
| - CHORE [273](https://github.com/gregnb/react-to-print/pull/273): updated `devDependencies`, `npm dedupe`, `npm audit fix` | ||
| ## 2.9.0 (June 2nd, 2020) | ||
@@ -4,0 +10,0 @@ |
@@ -19,4 +19,5 @@ import * as React from "react"; | ||
| onBeforePrint?: () => void | Promise<any>; | ||
| onPrintError?: (errorLocation: "onBeforeGetContent" | "onBeforePrint", error: Error) => void; | ||
| onPrintError?: (errorLocation: "onBeforeGetContent" | "onBeforePrint" | "print", error: Error) => void; | ||
| pageStyle?: string | PropertyFunction<string>; | ||
| print?: (target: HTMLIFrameElement) => Promise<any>; | ||
| removeAfterPrint?: boolean; | ||
@@ -40,2 +41,3 @@ suppressErrors?: boolean; | ||
| handlePrint: () => void; | ||
| handleRemoveIframe: () => void; | ||
| render(): JSX.Element | null; | ||
@@ -42,0 +44,0 @@ } |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define("lib",["react","react-dom"],t):"object"==typeof exports?exports.lib=t(require("react"),require("react-dom")):e.lib=t(e.react,e["react-dom"])}("undefined"!=typeof self?self:this,function(n,r){return a={},o.m=i=[function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.useReactToPrint=t.PrintContextConsumer=void 0;var r=n(1),i=n(2),a=n(3),o=i.hasOwnProperty("createContext"),u=i.hasOwnProperty("useMemo")&&i.hasOwnProperty("useCallback"),l=o?i.createContext({}):null;t.PrintContextConsumer=l?l.Consumer:function(){return null};var c,s={copyStyles:!0,pageStyle:"@page { size: auto; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; } }",removeAfterPrint:!1,suppressErrors:!1},f=(c=i.Component,r.__extends(d,c),d.prototype.render=function(){var e=this.props,t=e.children,n=e.suppressErrors,r=e.trigger;if(r)return i.cloneElement(r(),{onClick:this.handleClick});var o={handlePrint:this.handleClick};return l?l?i.createElement(l.Provider,{value:o},t):i.createElement("h2",null,"lorem"):(n||console.error('"react-to-print" requires React ^16.3.0 to be able to use "PrintContext"'),null)},d.defaultProps=s,d);function d(){var E=null!==c&&c.apply(this,arguments)||this;return E.startPrint=function(n){var e=E.props,r=e.onAfterPrint,o=e.removeAfterPrint,i=e.suppressErrors,a=e.documentTitle;setTimeout(function(){if(n.contentWindow){if(n.contentWindow.focus(),n.contentWindow.print){var e=document.title;a&&(document.title=a),n.contentWindow.print(),a&&(document.title=e),r&&r()}else i||console.error("Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes.");if(o){var t=document.getElementById("printWindow");t&&document.body.removeChild(t)}}else i||console.error("Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/gregnb/react-to-print/issues/")},500)},E.triggerPrint=function(e){var t=E.props,n=t.onBeforePrint,r=t.onPrintError;if(n){var o=n();o&&"function"==typeof o.then?o.then(function(){E.startPrint(e)}).catch(function(e){r&&r("onBeforePrint",e)}):E.startPrint(e)}else E.startPrint(e)},E.handleClick=function(){var e=E.props,t=e.onBeforeGetContent,n=e.onPrintError;if(t){var r=t();r&&"function"==typeof r.then?r.then(E.handlePrint).catch(function(e){n&&n("onBeforeGetContent",e)}):E.handlePrint()}else E.handlePrint()},E.handlePrint=function(){var e=E.props,P=e.bodyClass,t=e.content,x=e.copyStyles,O=e.pageStyle,S=e.suppressErrors,n=t();if(void 0!==n)if(null!==n){var k=document.createElement("iframe");k.style.position="absolute",k.style.top="-1000px",k.style.left="-1000px",k.id="printWindow",k.title="Print Window";var j=a.findDOMNode(n);if(j){var r=document.querySelectorAll("link[rel='stylesheet']"),C=j.querySelectorAll("img");E.linkTotal=r.length+C.length,E.linksLoaded=[],E.linksErrored=[];var T=function(e,t){t?E.linksLoaded.push(e):(S||console.error('"react-to-print" was unable to load a linked node. It may be invalid. "react-to-print" will continue attempting to print the page. The linked node that errored was:',e),E.linksErrored.push(e)),E.linksLoaded.length+E.linksErrored.length===E.linkTotal&&E.triggerPrint(k)};k.onload=function(){var e;k.onload=null;var t=k.contentDocument||(null===(e=k.contentWindow)||void 0===e?void 0:e.document),n=j.querySelectorAll("canvas");if(t){t.open(),t.write(j.outerHTML),t.close();var r="function"==typeof O?O():O,o=t.createElement("style");o.appendChild(t.createTextNode(r)),t.head.appendChild(o),P&&t.body.classList.add(P);for(var i=t.querySelectorAll("canvas"),a=0,u=i.length;a<u;++a){var l=(y=i[a]).getContext("2d");l&&l.drawImage(n[a],0,0)}for(a=0;a<C.length;a++){var c=C[a],s=c.getAttribute("src");if(s){var f=new Image;f.onload=T.bind(null,c,!0),f.onerror=T.bind(null,c,!1),f.src=s}else S||console.warn('"react-to-print" encountered an <img> tag with an empty "src" attribute. It will not attempt to pre-load it. The <img> is:',c)}if(x)for(var d=document.querySelectorAll("style, link[rel='stylesheet']"),p=(a=0,d.length);a<p;++a){var y;if("STYLE"===(y=d[a]).tagName){var h=t.createElement(y.tagName),b=y.sheet;if(b){for(var v="",m=0,g=b.cssRules.length;m<g;++m)"string"==typeof b.cssRules[m].cssText&&(v+=b.cssRules[m].cssText+"\r\n");h.setAttribute("id","react-to-print-"+a),h.appendChild(t.createTextNode(v)),t.head.appendChild(h)}}else if(y.getAttribute("href")){h=t.createElement(y.tagName),m=0;for(var w=y.attributes.length;m<w;++m){var _=y.attributes[m];_&&h.setAttribute(_.nodeName,_.nodeValue||"")}h.onload=T.bind(null,h,!0),h.onerror=T.bind(null,h,!1),t.head.appendChild(h)}else S||console.warn('"react-to-print" encountered a <link> tag with an empty "href" attribute. In addition to being invalid HTML, this can cause problems in many browsers, and so the <link> was not loaded. The <link> is:',y),T(y,!0)}}0!==E.linkTotal&&x||E.triggerPrint(k)};var o=document.getElementById("printWindow");o&&document.body.removeChild(o),document.body.appendChild(k)}else S||console.error('"react-to-print" could not locate the DOM node corresponding with the `content` prop')}else S||console.error('There is nothing to print because the "content" prop returned "null". Please ensure "content" is renderable before allowing "react-to-print" to be called.');else S||console.error('For "react-to-print" to work only Class based components can be printed.')},E}t.default=f,t.useReactToPrint=u?function(e){var t=i.useMemo(function(){return new f(r.__assign(r.__assign({},s),e))},[e]);return i.useCallback(function(){return t.handleClick()},[t])}:function(e){e.suppressErrors||console.warn('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"')}},function(e,t,n){"use strict";n.r(t),n.d(t,"__extends",function(){return o}),n.d(t,"__assign",function(){return i}),n.d(t,"__rest",function(){return a}),n.d(t,"__decorate",function(){return u}),n.d(t,"__param",function(){return l}),n.d(t,"__metadata",function(){return c}),n.d(t,"__awaiter",function(){return s}),n.d(t,"__generator",function(){return f}),n.d(t,"__exportStar",function(){return d}),n.d(t,"__values",function(){return p}),n.d(t,"__read",function(){return y}),n.d(t,"__spread",function(){return h}),n.d(t,"__spreadArrays",function(){return b}),n.d(t,"__await",function(){return v}),n.d(t,"__asyncGenerator",function(){return m}),n.d(t,"__asyncDelegator",function(){return g}),n.d(t,"__asyncValues",function(){return w}),n.d(t,"__makeTemplateObject",function(){return _}),n.d(t,"__importStar",function(){return P}),n.d(t,"__importDefault",function(){return x}),n.d(t,"__classPrivateFieldGet",function(){return O}),n.d(t,"__classPrivateFieldSet",function(){return S});var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function o(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return(i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function u(e,t,n,r){var o,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var u=e.length-1;0<=u;u--)(o=e[u])&&(a=(i<3?o(a):3<i?o(t,n,a):o(t,n))||a);return 3<i&&a&&Object.defineProperty(t,n,a),a}function l(n,r){return function(e,t){r(e,t,n)}}function c(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function s(e,a,u,l){return new(u=u||Promise)(function(n,t){function r(e){try{i(l.next(e))}catch(e){t(e)}}function o(e){try{i(l.throw(e))}catch(e){t(e)}}function i(e){var t;e.done?n(e.value):((t=e.value)instanceof u?t:new u(function(e){e(t)})).then(r,o)}i((l=l.apply(e,a||[])).next())})}function f(n,r){var o,i,a,e,u={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return e={next:t(0),throw:t(1),return:t(2)},"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function t(t){return function(e){return function(t){if(o)throw new TypeError("Generator is already executing.");for(;u;)try{if(o=1,i&&(a=2&t[0]?i.return:t[0]?i.throw||((a=i.return)&&a.call(i),0):i.next)&&!(a=a.call(i,t[1])).done)return a;switch(i=0,a&&(t=[2&t[0],a.value]),t[0]){case 0:case 1:a=t;break;case 4:return u.label++,{value:t[1],done:!1};case 5:u.label++,i=t[1],t=[0];continue;case 7:t=u.ops.pop(),u.trys.pop();continue;default:if(!(a=0<(a=u.trys).length&&a[a.length-1])&&(6===t[0]||2===t[0])){u=0;continue}if(3===t[0]&&(!a||t[1]>a[0]&&t[1]<a[3])){u.label=t[1];break}if(6===t[0]&&u.label<a[1]){u.label=a[1],a=t;break}if(a&&u.label<a[2]){u.label=a[2],u.ops.push(t);break}a[2]&&u.ops.pop(),u.trys.pop();continue}t=r.call(n,u)}catch(e){t=[6,e],i=0}finally{o=a=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}([t,e])}}}function d(e,t){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}function p(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function y(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||0<t--)&&!(r=i.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function h(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(y(arguments[t]));return e}function b(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),o=0;for(t=0;t<n;t++)for(var i=arguments[t],a=0,u=i.length;a<u;a++,o++)r[o]=i[a];return r}function v(e){return this instanceof v?(this.v=e,this):new v(e)}function m(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var o,i=n.apply(e,t||[]),a=[];return o={},r("next"),r("throw"),r("return"),o[Symbol.asyncIterator]=function(){return this},o;function r(r){i[r]&&(o[r]=function(n){return new Promise(function(e,t){1<a.push([r,n,e,t])||u(r,n)})})}function u(e,t){try{(n=i[e](t)).value instanceof v?Promise.resolve(n.value.v).then(l,c):s(a[0][2],n)}catch(e){s(a[0][3],e)}var n}function l(e){u("next",e)}function c(e){u("throw",e)}function s(e,t){e(t),a.shift(),a.length&&u(a[0][0],a[0][1])}}function g(r){var e,o;return e={},t("next"),t("throw",function(e){throw e}),t("return"),e[Symbol.iterator]=function(){return this},e;function t(t,n){e[t]=r[t]?function(e){return(o=!o)?{value:v(r[t](e)),done:"return"===t}:n?n(e):e}:n}}function w(l){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var e,t=l[Symbol.asyncIterator];return t?t.call(l):(l=p(l),e={},n("next"),n("throw"),n("return"),e[Symbol.asyncIterator]=function(){return this},e);function n(u){e[u]=l[u]&&function(a){return new Promise(function(e,t){var n,r,o,i;a=l[u](a),n=e,r=t,o=a.done,i=a.value,Promise.resolve(i).then(function(e){n({value:e,done:o})},r)})}}}function _(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}function P(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function x(e){return e&&e.__esModule?e:{default:e}}function O(e,t){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return t.get(e)}function S(e,t,n){if(!t.has(e))throw new TypeError("attempted to set private field on non-instance");return t.set(e,n),n}},function(e,t){e.exports=n},function(e,t){e.exports=r}],o.c=a,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0);function o(e){if(a[e])return a[e].exports;var t=a[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}var i,a}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define("lib",["react","react-dom"],t):"object"==typeof exports?exports.lib=t(require("react"),require("react-dom")):e.lib=t(e.react,e["react-dom"])}("undefined"!=typeof self?self:this,function(n,r){return a={},o.m=i=[function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.useReactToPrint=t.PrintContextConsumer=void 0;var r=n(1),i=n(2),a=n(3),o=i.hasOwnProperty("createContext"),l=i.hasOwnProperty("useMemo")&&i.hasOwnProperty("useCallback"),u=o?i.createContext({}):null;t.PrintContextConsumer=u?u.Consumer:function(){return null};var c,s={copyStyles:!0,pageStyle:"@page { size: auto; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; } }",removeAfterPrint:!1,suppressErrors:!1},f=(c=i.Component,r.__extends(d,c),d.prototype.render=function(){var e=this.props,t=e.children,n=e.suppressErrors,r=e.trigger;if(r)return i.cloneElement(r(),{onClick:this.handleClick});var o={handlePrint:this.handleClick};return u?u?i.createElement(u.Provider,{value:o},t):i.createElement("h2",null,"lorem"):(n||console.error('"react-to-print" requires React ^16.3.0 to be able to use "PrintContext"'),null)},d.defaultProps=s,d);function d(){var E=null!==c&&c.apply(this,arguments)||this;return E.startPrint=function(t){var e=E.props,n=e.onAfterPrint,r=e.onPrintError,o=e.print,i=e.suppressErrors,a=e.documentTitle;setTimeout(function(){if(t.contentWindow){if(t.contentWindow.focus(),o)o(t).then(E.handleRemoveIframe).catch(function(e){r?r("print",e):i||console.error("An error was thrown by the specified `print` function",e)});else if(t.contentWindow.print){var e=document.title;a&&(document.title=a),t.contentWindow.print(),a&&(document.title=e),n&&n()}else i||console.error("Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes.");E.handleRemoveIframe()}else i||console.error("Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/gregnb/react-to-print/issues/")},500)},E.triggerPrint=function(e){var t=E.props,n=t.onBeforePrint,r=t.onPrintError;if(n){var o=n();o&&"function"==typeof o.then?o.then(function(){E.startPrint(e)}).catch(function(e){r&&r("onBeforePrint",e)}):E.startPrint(e)}else E.startPrint(e)},E.handleClick=function(){var e=E.props,t=e.onBeforeGetContent,n=e.onPrintError;if(t){var r=t();r&&"function"==typeof r.then?r.then(E.handlePrint).catch(function(e){n&&n("onBeforeGetContent",e)}):E.handlePrint()}else E.handlePrint()},E.handlePrint=function(){var e=E.props,P=e.bodyClass,t=e.content,x=e.copyStyles,O=e.pageStyle,S=e.suppressErrors,n=t();if(void 0!==n)if(null!==n){var k=document.createElement("iframe");k.style.position="absolute",k.style.top="-1000px",k.style.left="-1000px",k.id="printWindow",k.title="Print Window";var j=a.findDOMNode(n);if(j){var r=document.querySelectorAll("link[rel='stylesheet']"),C=j.querySelectorAll("img");E.linkTotal=r.length+C.length,E.linksLoaded=[],E.linksErrored=[];var T=function(e,t){t?E.linksLoaded.push(e):(S||console.error('"react-to-print" was unable to load a linked node. It may be invalid. "react-to-print" will continue attempting to print the page. The linked node that errored was:',e),E.linksErrored.push(e)),E.linksLoaded.length+E.linksErrored.length===E.linkTotal&&E.triggerPrint(k)};k.onload=function(){var e;k.onload=null;var t=k.contentDocument||(null===(e=k.contentWindow)||void 0===e?void 0:e.document),n=j.querySelectorAll("canvas");if(t){t.open(),t.write(j.outerHTML),t.close();var r="function"==typeof O?O():O,o=t.createElement("style");o.appendChild(t.createTextNode(r)),t.head.appendChild(o),P&&t.body.classList.add(P);for(var i=t.querySelectorAll("canvas"),a=0,l=i.length;a<l;++a){var u=(h=i[a]).getContext("2d");u&&u.drawImage(n[a],0,0)}for(a=0;a<C.length;a++){var c=C[a],s=c.getAttribute("src");if(s){var f=new Image;f.onload=T.bind(null,c,!0),f.onerror=T.bind(null,c,!1),f.src=s}else S||console.warn('"react-to-print" encountered an <img> tag with an empty "src" attribute. It will not attempt to pre-load it. The <img> is:',c)}if(x)for(var d=document.querySelectorAll("style, link[rel='stylesheet']"),p=(a=0,d.length);a<p;++a){var h;if("STYLE"===(h=d[a]).tagName){var y=t.createElement(h.tagName),b=h.sheet;if(b){for(var m="",v=0,w=b.cssRules.length;v<w;++v)"string"==typeof b.cssRules[v].cssText&&(m+=b.cssRules[v].cssText+"\r\n");y.setAttribute("id","react-to-print-"+a),y.appendChild(t.createTextNode(m)),t.head.appendChild(y)}}else if(h.getAttribute("href")){y=t.createElement(h.tagName),v=0;for(var g=h.attributes.length;v<g;++v){var _=h.attributes[v];_&&y.setAttribute(_.nodeName,_.nodeValue||"")}y.onload=T.bind(null,y,!0),y.onerror=T.bind(null,y,!1),t.head.appendChild(y)}else S||console.warn('"react-to-print" encountered a <link> tag with an empty "href" attribute. In addition to being invalid HTML, this can cause problems in many browsers, and so the <link> was not loaded. The <link> is:',h),T(h,!0)}}0!==E.linkTotal&&x||E.triggerPrint(k)};var o=document.getElementById("printWindow");o&&document.body.removeChild(o),document.body.appendChild(k)}else S||console.error('"react-to-print" could not locate the DOM node corresponding with the `content` prop')}else S||console.error('There is nothing to print because the "content" prop returned "null". Please ensure "content" is renderable before allowing "react-to-print" to be called.');else S||console.error('For "react-to-print" to work only Class based components can be printed.')},E.handleRemoveIframe=function(){if(E.props.removeAfterPrint){var e=document.getElementById("printWindow");e&&document.body.removeChild(e)}},E}t.default=f,t.useReactToPrint=l?function(e){var t=i.useMemo(function(){return new f(r.__assign(r.__assign({},s),e))},[e]);return i.useCallback(function(){return t.handleClick()},[t])}:function(e){e.suppressErrors||console.warn('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"')}},function(e,t,n){"use strict";n.r(t),n.d(t,"__extends",function(){return o}),n.d(t,"__assign",function(){return i}),n.d(t,"__rest",function(){return a}),n.d(t,"__decorate",function(){return l}),n.d(t,"__param",function(){return u}),n.d(t,"__metadata",function(){return c}),n.d(t,"__awaiter",function(){return s}),n.d(t,"__generator",function(){return f}),n.d(t,"__exportStar",function(){return d}),n.d(t,"__values",function(){return p}),n.d(t,"__read",function(){return h}),n.d(t,"__spread",function(){return y}),n.d(t,"__spreadArrays",function(){return b}),n.d(t,"__await",function(){return m}),n.d(t,"__asyncGenerator",function(){return v}),n.d(t,"__asyncDelegator",function(){return w}),n.d(t,"__asyncValues",function(){return g}),n.d(t,"__makeTemplateObject",function(){return _}),n.d(t,"__importStar",function(){return P}),n.d(t,"__importDefault",function(){return x}),n.d(t,"__classPrivateFieldGet",function(){return O}),n.d(t,"__classPrivateFieldSet",function(){return S});var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function o(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return(i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function l(e,t,n,r){var o,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var l=e.length-1;0<=l;l--)(o=e[l])&&(a=(i<3?o(a):3<i?o(t,n,a):o(t,n))||a);return 3<i&&a&&Object.defineProperty(t,n,a),a}function u(n,r){return function(e,t){r(e,t,n)}}function c(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function s(e,a,l,u){return new(l=l||Promise)(function(n,t){function r(e){try{i(u.next(e))}catch(e){t(e)}}function o(e){try{i(u.throw(e))}catch(e){t(e)}}function i(e){var t;e.done?n(e.value):((t=e.value)instanceof l?t:new l(function(e){e(t)})).then(r,o)}i((u=u.apply(e,a||[])).next())})}function f(n,r){var o,i,a,e,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return e={next:t(0),throw:t(1),return:t(2)},"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function t(t){return function(e){return function(t){if(o)throw new TypeError("Generator is already executing.");for(;l;)try{if(o=1,i&&(a=2&t[0]?i.return:t[0]?i.throw||((a=i.return)&&a.call(i),0):i.next)&&!(a=a.call(i,t[1])).done)return a;switch(i=0,a&&(t=[2&t[0],a.value]),t[0]){case 0:case 1:a=t;break;case 4:return l.label++,{value:t[1],done:!1};case 5:l.label++,i=t[1],t=[0];continue;case 7:t=l.ops.pop(),l.trys.pop();continue;default:if(!(a=0<(a=l.trys).length&&a[a.length-1])&&(6===t[0]||2===t[0])){l=0;continue}if(3===t[0]&&(!a||t[1]>a[0]&&t[1]<a[3])){l.label=t[1];break}if(6===t[0]&&l.label<a[1]){l.label=a[1],a=t;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(t);break}a[2]&&l.ops.pop(),l.trys.pop();continue}t=r.call(n,l)}catch(e){t=[6,e],i=0}finally{o=a=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}([t,e])}}}function d(e,t){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}function p(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function h(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||0<t--)&&!(r=i.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function y(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(h(arguments[t]));return e}function b(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),o=0;for(t=0;t<n;t++)for(var i=arguments[t],a=0,l=i.length;a<l;a++,o++)r[o]=i[a];return r}function m(e){return this instanceof m?(this.v=e,this):new m(e)}function v(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var o,i=n.apply(e,t||[]),a=[];return o={},r("next"),r("throw"),r("return"),o[Symbol.asyncIterator]=function(){return this},o;function r(r){i[r]&&(o[r]=function(n){return new Promise(function(e,t){1<a.push([r,n,e,t])||l(r,n)})})}function l(e,t){try{(n=i[e](t)).value instanceof m?Promise.resolve(n.value.v).then(u,c):s(a[0][2],n)}catch(e){s(a[0][3],e)}var n}function u(e){l("next",e)}function c(e){l("throw",e)}function s(e,t){e(t),a.shift(),a.length&&l(a[0][0],a[0][1])}}function w(r){var e,o;return e={},t("next"),t("throw",function(e){throw e}),t("return"),e[Symbol.iterator]=function(){return this},e;function t(t,n){e[t]=r[t]?function(e){return(o=!o)?{value:m(r[t](e)),done:"return"===t}:n?n(e):e}:n}}function g(u){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var e,t=u[Symbol.asyncIterator];return t?t.call(u):(u=p(u),e={},n("next"),n("throw"),n("return"),e[Symbol.asyncIterator]=function(){return this},e);function n(l){e[l]=u[l]&&function(a){return new Promise(function(e,t){var n,r,o,i;a=u[l](a),n=e,r=t,o=a.done,i=a.value,Promise.resolve(i).then(function(e){n({value:e,done:o})},r)})}}}function _(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}function P(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function x(e){return e&&e.__esModule?e:{default:e}}function O(e,t){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return t.get(e)}function S(e,t,n){if(!t.has(e))throw new TypeError("attempted to set private field on non-instance");return t.set(e,n),n}},function(e,t){e.exports=n},function(e,t){e.exports=r}],o.c=a,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0);function o(e){if(a[e])return a[e].exports;var t=a[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}var i,a}); |
| { | ||
| "name": "react-to-print", | ||
| "version": "2.9.0", | ||
| "version": "2.10.0", | ||
| "description": "Print React components in the browser", | ||
@@ -14,3 +14,3 @@ "main": "lib/index.js", | ||
| "prepare": "npm run build", | ||
| "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'" | ||
| "lint": "eslint src/**/*.{ts,tsx}" | ||
| }, | ||
@@ -44,10 +44,13 @@ "repository": { | ||
| "devDependencies": { | ||
| "@types/react": "^16.9.35", | ||
| "@types/react": "^16.9.46", | ||
| "@types/react-dom": "^16.9.8", | ||
| "@typescript-eslint/eslint-plugin": "^3.9.1", | ||
| "@typescript-eslint/parser": "^3.9.1", | ||
| "acorn": "^7.2.0", | ||
| "clean-webpack-plugin": "^3.0.0", | ||
| "css-loader": "^3.5.3", | ||
| "eslint": "^7.7.0", | ||
| "html-webpack-plugin": "^4.3.0", | ||
| "husky": "^4.2.5", | ||
| "lint-staged": "^10.2.7", | ||
| "lint-staged": "^10.2.11", | ||
| "react": "^16.8.4", | ||
@@ -57,7 +60,6 @@ "react-dom": "^16.8.4", | ||
| "ts-loader": "^7.0.5", | ||
| "tslint": "^6.1.2", | ||
| "typescript": "^3.9.3", | ||
| "uglifyjs-webpack-plugin": "^2.2.0", | ||
| "webpack": "^4.43.0", | ||
| "webpack-cli": "^3.3.11", | ||
| "webpack": "^4.44.1", | ||
| "webpack-cli": "^3.3.12", | ||
| "webpack-dev-server": "^3.11.0" | ||
@@ -72,5 +74,5 @@ }, | ||
| "*.{ts,tsx}": [ | ||
| "tslint" | ||
| "eslint" | ||
| ] | ||
| } | ||
| } |
@@ -40,16 +40,17 @@ <div align="center"> | ||
| | Name | Type | Description | | ||
| | Name | Type | Description | | ||
| | :-------------------: | :------- | :---------------------------------------------------------------------------------------------------------------------------------- | | ||
| | **`trigger?`** | `function` | A function that returns a React Component or Element. Note: under the hood, we inject a custom `onClick` prop into the returned Component/Element. As such, do not provide an `onClick` prop to the root node returned by `trigger`, as it will be overwritten. | | ||
| | **`content`** | `function` | A function that returns a component reference value. The content of this reference value is then used for print | | ||
| | **`copyStyles?`** | `boolean` | Copy all `<style>` and `<link type="stylesheet" />` tags from `<head>` inside the parent window into the print window. (default: `true`) | | ||
| | **`documentTitle?`** | `string` | Set the title for printing when saving as a file | ||
| | **`onBeforeGetContent?`** | `function` | Callback function that triggers before the library gathers the page's content. Either returns void or a Promise. This can be used to change the content on the page before printing. | ||
| | **`onBeforePrint?`** | `function` | Callback function that triggers before print. Either returns void or a Promise. Note: this function is run immediately prior to printing, but after the page's content has been gathered. To modify content before printing, use `onBeforeGetContent` instead. | | ||
| | **`onAfterPrint?`** | `function` | Callback function that triggers after the print dialog is closed regardless of if the user selected to print or cancel | | ||
| | **`onPrintError?`** | `function` | Callback function (signature: `function(errorLocation: 'onBeforePrint' | 'onBeforeGetContent', error: Error)`) that will be called if there is a printing error serious enough that printing cannot continue. Currently limited to Promise rejections in `onBeforeGetContent` or `onBeforePrint`. Use this to attempt to print again. `errorLocation` will tell you in which callback the Promise was rejected. | | ||
| | **`removeAfterPrint?`** | `boolean` | Remove the print iframe after action. Defaults to `false`. | | ||
| | **`pageStyle?`** | `string | function` | We set some basic styles to help improve page printing. Use this to override them and provide your own. If given as a function, it must return a `string` | | ||
| | **`bodyClass`** | `string?` | Class to pass to the print window body | | ||
| | **`suppressErrors`** | `boolean?` | When passed, prevents `console` logging of errors | ||
| | **`bodyClass?`** | `string` | Class to pass to the print window | | ||
| | **`content`** | `function` | A function that returns a component reference value. The content of this reference value is then used for print | | ||
| | **`copyStyles?`** | `boolean` | Copy all `<style>` and `<link type="stylesheet" />` tags from `<head>` inside the parent window into the print window. (default: `true`) | | ||
| | **`documentTitle?`** | `string` | Set the title for printing when saving as a file | | ||
| | **`onAfterPrint?`** | `function` | Callback function that triggers after the print dialog is closed regardless of if the user selected to print or cancel | | ||
| | **`onBeforeGetContent?`** | `function` | Callback function that triggers before the library gathers the page's content. Either returns void or a Promise. This can be used to change the content on the page before printing | | ||
| | **`onBeforePrint?`** | `function` | Callback function that triggers before print. Either returns void or a Promise. Note: this function is run immediately prior to printing, but after the page's content has been gathered. To modify content before printing, use `onBeforeGetContent` instead | | ||
| | **`onPrintError?`** | `function` | Callback function (signature: `function(errorLocation: 'onBeforePrint' | 'onBeforeGetContent' | 'print', error: Error)`) that will be called if there is a printing error serious enough that printing cannot continue. Currently limited to Promise rejections in `onBeforeGetContent`, `onBeforePrint`, and `print`. Use this to attempt to print again. `errorLocation` will tell you in which callback the Promise was rejected | | ||
| | **`pageStyle?`** | `string` or `function` | We set some basic styles to help improve page printing. Use this to override them and provide your own. If given as a function it must return a `string` | | ||
| | **`print?`** | `function` | If passed, this function will be used instead of `window.print` to print the content. This function is passed the `HTMLIFrameElement` which is the iframe used internally to gather content for printing. When finished, this function must return a Promise. Use this to print in non-browser environments such as Electron | | ||
| | **`removeAfterPrint?`** | `boolean` | Remove the print iframe after action. Defaults to `false` | | ||
| | **`suppressErrors?`** | `boolean` | When passed, prevents `console` logging of errors | | ||
| | **`trigger?`** | `function` | A function that returns a React Component or Element. Note: under the hood, we inject a custom `onClick` prop into the returned Component/Element. As such, do not provide an `onClick` prop to the root node returned by `trigger`, as it will be overwritten | | ||
@@ -241,2 +242,51 @@ ### `PrintContextConsumer` | ||
| ## Pattern for Page-Breaking Dynamic React Content | ||
| In HTML (e.g., JSX), define a page-break class to apply to elements which could be sensibly split into a following page. | ||
| ``` | ||
| <div className="print-container" style={{margin: "0", padding: "0"}}> | ||
| {_.map(listOfContent, yourContent => ( | ||
| <div className="page-break" /> | ||
| <div>{yourContent}</div> | ||
| )} | ||
| </div> | ||
| ``` | ||
| In corresponding style files, define your `media print` styles, including: setting your preference for CSS `page-break-` (see [w3's reference](https://www.w3schools.com/cssref/pr_print_pageba.asp) for options) to `auto`, and ensuring that your `page-break` element does not affect non-print style. | ||
| ``` | ||
| @media all { | ||
| .page-break { | ||
| display: none; | ||
| } | ||
| } | ||
| @media print { | ||
| html, body { | ||
| height: initial !important; | ||
| overflow: initial !important; | ||
| -webkit-print-color-adjust: exact; | ||
| } | ||
| } | ||
| @media print { | ||
| .page-break { | ||
| margin-top: 1rem; | ||
| display: block; | ||
| page-break-before: auto; | ||
| } | ||
| } | ||
| @page { | ||
| size: auto; | ||
| margin: 20mm; | ||
| } | ||
| ``` | ||
| ## Troubleshooting Page Breaks | ||
| If your content rendered as print media does not automatically break multipage content into multiple pages, the issue may be | ||
| 1) style incompatibilities with print media rendering, **or** | ||
| 2) a need to assign `CSS page-break-` properties to define how your document should behave when printed. | ||
| ### Common Style Pitfalls | ||
| - A style of `overflow: scroll`, when rendered to print, will result in cut off content instead of page breaks to include the content. | ||
| - A style of `position: absolute`, when rendered to print, may result in reformatted, rotated, or re-scaled content, causing unintended affects to print page layout and page breaks. | ||
| ## Running locally | ||
@@ -271,1 +321,17 @@ | ||
| Unfortunately there is no standard browser API for interacting with the print dialog. All `react-to-print` is able to do is open the dialog and give it the desired content to print. We cannot modify settings such as the default paper size, if the user has background graphics selected or not, etc. | ||
| ## Helpful CSS Tricks | ||
| ### Set landscape printing ([240](https://github.com/gregnb/react-to-print/issues/240)) | ||
| In the component that is passed in as the content ref, add the following: | ||
| ```css | ||
| @media print { | ||
| @page { size: landscape; } | ||
| } | ||
| ``` | ||
| ### Printing elements that are not displayed ([159](https://github.com/gregnb/react-to-print/issues/159)) | ||
| Instead of using `{ display: 'none' }`, try using `{ overflow: hidden; height: 0; }` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.69%
40862
- Lines of code
- increased by4.76%
44
- Number of lines in readme file
- increased by24.54%
335
Worsened metrics
- Dev dependency count
- increased by11.11%
20
No dependency changes