Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-to-print

Package Overview
Dependencies
Maintainers
2
Versions
94
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-to-print - npm Package Compare versions

Comparing version 2.7.0 to 2.8.0-beta.1

10

lib/index.d.ts
import * as React from "react";
export interface IPrintContextProps {
handlePrint: () => void;
}
export declare const PrintContextConsumer: React.Consumer<IPrintContextProps> | (() => null);
export interface ITriggerProps<T> {

@@ -11,2 +15,3 @@ onClick: () => void;

copyStyles?: boolean;
documentTitle?: string;
onAfterPrint?: () => void;

@@ -19,3 +24,3 @@ onBeforeGetContent?: () => void | Promise<any>;

suppressErrors?: boolean;
trigger: <T>() => React.ReactElement<ITriggerProps<T>>;
trigger?: <T>() => React.ReactElement<ITriggerProps<T>>;
}

@@ -36,4 +41,5 @@ export default class ReactToPrint extends React.Component<IReactToPrintProps> {

handlePrint: () => void;
render(): React.ReactElement<ITriggerProps<unknown>, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
render(): JSX.Element | null;
}
export declare const useReactToPrint: ((props: IReactToPrintProps) => () => void) | ((props: IReactToPrintProps) => null);
export {};

2

lib/index.js

@@ -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});var r,o=n(1),i=n(2),a=n(3),l=(r=i.Component,o.__extends(u,r),u.prototype.render=function(){var e=this.props.trigger;return i.cloneElement(e(),{onClick:this.handleClick})},u.defaultProps={copyStyles:!0,pageStyle:"@page { size: auto; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; } }",removeAfterPrint:!1,suppressErrors:!1},u);function u(){var C=null!==r&&r.apply(this,arguments)||this;return C.startPrint=function(t){var e=C.props,n=e.onAfterPrint,r=e.removeAfterPrint,o=e.suppressErrors;setTimeout(function(){if(t.contentWindow){if(t.contentWindow.focus(),t.contentWindow.print?(t.contentWindow.print(),n&&n()):o||console.error("Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes."),r){var e=document.getElementById("printWindow");e&&document.body.removeChild(e)}}else o||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)},C.triggerPrint=function(e){var t=C.props,n=t.onBeforePrint,r=t.onPrintError;if(n){var o=n();o&&"function"==typeof o.then?o.then(function(){C.startPrint(e)}).catch(function(e){r&&r("onBeforePrint",e)}):C.startPrint(e)}else C.startPrint(e)},C.handleClick=function(){var e=C.props,t=e.onBeforeGetContent,n=e.onPrintError;if(t){var r=t();r&&"function"==typeof r.then?r.then(C.handlePrint).catch(function(e){n&&n("onBeforeGetContent",e)}):C.handlePrint()}else C.handlePrint()},C.handlePrint=function(){var e=C.props,P=e.bodyClass,t=e.content,O=e.copyStyles,x=e.pageStyle,S=e.suppressErrors,n=t();if(void 0!==n)if(null!==n){var j=document.createElement("iframe");j.style.position="absolute",j.style.top="-1000px",j.style.left="-1000px",j.id="printWindow",j.title="Print Window";var k=a.findDOMNode(n);if(k){var r=document.querySelectorAll("link[rel='stylesheet']"),T=k.querySelectorAll("img");C.linkTotal=r.length+T.length,C.linksLoaded=[],C.linksErrored=[];var E=function(e,t){t?C.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),C.linksErrored.push(e)),C.linksLoaded.length+C.linksErrored.length===C.linkTotal&&C.triggerPrint(j)};j.onload=function(){var e;window.navigator&&-1<window.navigator.userAgent.indexOf("Trident/7.0")&&(j.onload=null);var t=j.contentDocument||(null===(e=j.contentWindow)||void 0===e?void 0:e.document),n=k.querySelectorAll("canvas");if(t){t.open(),t.write(k.outerHTML),t.close();var r="function"==typeof x?x():x,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=(y=i[a]).getContext("2d");u&&u.drawImage(n[a],0,0)}for(a=0;a<T.length;a++){var c=T[a],f=c.getAttribute("src");if(f){var s=new Image;s.onload=E.bind(null,c,!0),s.onerror=E.bind(null,c,!1),s.src=f}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(O)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=E.bind(null,h,!0),h.onerror=E.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),E(y,!0)}}0!==C.linkTotal&&O||C.triggerPrint(j)};var o=document.getElementById("printWindow");o&&document.body.removeChild(o),document.body.appendChild(j)}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.')},C}t.default=l},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 f}),n.d(t,"__generator",function(){return s}),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 O}),n.d(t,"__classPrivateFieldGet",function(){return x}),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 f(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 s(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 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,l=i.length;a<l;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])||l(r,n)})})}function l(e,t){try{(n=i[e](t)).value instanceof v?Promise.resolve(n.value.v).then(u,c):f(a[0][2],n)}catch(e){f(a[0][3],e)}var n}function u(e){l("next",e)}function c(e){l("throw",e)}function f(e,t){e(t),a.shift(),a.length&&l(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(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 O(e){return e&&e.__esModule?e:{default:e}}function x(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"),u=i.hasOwnProperty("useMemo")&&i.hasOwnProperty("useCallback"),l=o?i.createContext({}):null;t.PrintContextConsumer=l?l.Consumer:function(){return null};var c,s=(c=i.Component,r.__extends(f,c),f.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)},f.defaultProps={copyStyles:!0,pageStyle:"@page { size: auto; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; } }",removeAfterPrint:!1,suppressErrors:!1},f);function f(){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 T=a.findDOMNode(n);if(T){var r=document.querySelectorAll("link[rel='stylesheet']"),j=T.querySelectorAll("img");E.linkTotal=r.length+j.length,E.linksLoaded=[],E.linksErrored=[];var C=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;window.navigator&&-1<window.navigator.userAgent.indexOf("Trident/7.0")&&(k.onload=null);var t=k.contentDocument||(null===(e=k.contentWindow)||void 0===e?void 0:e.document),n=T.querySelectorAll("canvas");if(t){t.open(),t.write(T.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<j.length;a++){var c=j[a],s=c.getAttribute("src");if(s){var f=new Image;f.onload=C.bind(null,c,!0),f.onerror=C.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,w=b.cssRules.length;m<w;++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 g=y.attributes.length;m<g;++m){var _=y.attributes[m];_&&h.setAttribute(_.nodeName,_.nodeValue||"")}h.onload=C.bind(null,h,!0),h.onerror=C.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),C(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=s,t.useReactToPrint=u?function(e){var t=i.useMemo(function(){return new s(e)},[e]);return i.useCallback(function(){return t.handleClick()},[t])}:function(e){return e.suppressErrors||console.warn('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"'),null}},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 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 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 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:v(r[t](e)),done:"return"===t}:n?n(e):e}:n}}function g(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});
{
"name": "react-to-print",
"version": "2.7.0",
"version": "2.8.0-beta.1",
"description": "Print React components in the browser",

@@ -43,20 +43,20 @@ "main": "lib/index.js",

"devDependencies": {
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.7",
"acorn": "^7.1.1",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"acorn": "^7.2.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.2.1",
"html-webpack-plugin": "^4.3.0",
"husky": "^4.2.5",
"lint-staged": "^10.2.0",
"lint-staged": "^10.2.2",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"style-loader": "^1.2.1",
"ts-loader": "^7.0.1",
"ts-loader": "^7.0.4",
"tslint": "^6.1.2",
"typescript": "^3.8.3",
"typescript": "^3.9.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
"webpack-dev-server": "^3.11.0"
},

@@ -70,6 +70,5 @@ "husky": {

"*.{ts,tsx}": [
"tslint",
"git add"
"tslint"
]
}
}

@@ -42,5 +42,6 @@ <div align="center">

| :-------------------: | :------- | :---------------------------------------------------------------------------------------------------------------------------------- |
| **`trigger`** | `function` | A function that returns a React Component or HTML element |
| **`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.

@@ -55,4 +56,12 @@ | **`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. |

## Example
### `PrintContextConsumer`
If you need extra control over printing and don't want to specify `trigger` directly, `PrintContextConsumer` allows you to gain direct access to the `handlePrint` method which triggers the print action. Requires React ^16.3.0.
### `useReactToPrint`
For functional components, use the `useReactToPrint` hook, which accepts an object with the same configuration props as `<ReactToPrint />` and returns a `handlePrint` function which when called will trigger the print action. Requires React ^16.8.0.
## Examples
### Calling from class components

@@ -90,3 +99,7 @@

<ReactToPrint
trigger={() => <a href="#">Print this out!</a>}
trigger={() => {
// NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
// to the root node of the returned component as it will be overwritten.
return <a href="#">Print this out!</a>;
}}
content={() => this.componentRef}

@@ -101,5 +114,50 @@ />

### Calling from functional components with [hooks](https://reactjs.org/docs/hooks-intro.html)
### Calling from class components with `PrintContextConsumer`
```js
import React from 'react';
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
class ComponentToPrint extends React.Component {
render() {
return (
<table>
<thead>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
</tbody>
</table>
);
}
}
class Example extends React.Component {
render() {
return (
<div>
<ReactToPrint content={() => this.componentRef}>
<PrintContextConsumer>
{({ handlePrint }) => (
<button onClick={handlePrint}>Print this out!</button>
)}
</PrintContextConsumer>
</ReactToPrint>
<ComponentToPrint ref={el => (this.componentRef = el)} />
</div>
);
}
}
```
### Calling from functional components
```js
import React, { useRef } from 'react';

@@ -144,2 +202,44 @@ import ReactToPrint from 'react-to-print';

### Calling from functional components with [useReactToPrint](https://reactjs.org/docs/hooks-intro.html)
```js
import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';
class ComponentToPrint extends React.Component {
render() {
return (
<table>
<thead>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
</tbody>
</table>
);
}
}
const Example = () => {
const componentRef = useRef();
const handlePrint = useReactToPrint({
content: () => componentRef.current,
});
return (
<div>
<ComponentToPrint ref={componentRef} />
<button onClick={handlePrint}>Print this out!</button>
</div>
);
};
```
## Running locally

@@ -146,0 +246,0 @@

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc