react-to-print - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/index.js

@@ -1,2 +0,2 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var React=_interopDefault(require("react")),reactDom=require("react-dom"),PropTypes=_interopDefault(require("prop-types")),_createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),ReactToPrint=function(e){function t(){var e,r,n,o;_classCallCheck(this,t);for(var i=arguments.length,c=Array(i),a=0;a<i;a++)c[a]=arguments[a];return r=n=_possibleConstructorReturn(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(c))),n.handlePrint=function(){var e=n.props,t=e.content,r=e.copyStyles,o=t(),i=reactDom.findDOMNode(o).outerHTML,c=window.open("","Print","status=no, toolbar=no, scrollbars=yes","false");if(!1!==r){document.head.querySelectorAll("link, style").forEach(function(e){return c.document.head.appendChild(e.cloneNode(!0))})}var a=document.createElement("style");a.appendChild(document.createTextNode("@page { size: auto;  margin: 0mm; }")),c.document.head.appendChild(a),c.document.body.innerHTML=i,c.print(),c.close()},o=r,_possibleConstructorReturn(n,o)}return _inherits(t,React.Component),_createClass(t,[{key:"render",value:function(){var e=this;return React.cloneElement(this.props.trigger(),{ref:function(t){return e.triggerRef=t},onClick:this.handlePrint})}}]),t}();ReactToPrint.propTypes={copyStyles:PropTypes.bool,trigger:PropTypes.func.isRequired,content:PropTypes.func.isRequired},ReactToPrint.defaultProps={copyStyles:!0},module.exports=ReactToPrint;
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=_interopDefault(require("react")),reactDom=require("react-dom"),PropTypes=_interopDefault(require("prop-types")),classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},ReactToPrint=function(e){function t(){var e,r,n,o;classCallCheck(this,t);for(var i=arguments.length,c=Array(i),a=0;a<i;a++)c[a]=arguments[a];return r=n=possibleConstructorReturn(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(c))),n.handlePrint=function(){var e=n.props,t=e.content,r=e.copyStyles,o=t(),i=reactDom.findDOMNode(o).outerHTML,c=window.open("","Print","status=no, toolbar=no, scrollbars=yes","false");if(!1!==r){document.head.querySelectorAll("link, style").forEach(function(e){return c.document.head.appendChild(e.cloneNode(!0))})}var a=document.createElement("style");a.appendChild(document.createTextNode("@page { size: auto;  margin: 0mm; }")),c.document.head.appendChild(a),c.document.body.innerHTML=i,c.print(),c.close()},o=r,possibleConstructorReturn(n,o)}return inherits(t,e),createClass(t,[{key:"render",value:function(){var e=this;return React.cloneElement(this.props.trigger(),{ref:function(t){return e.triggerRef=t},onClick:this.handlePrint})}}]),t}(React.Component);ReactToPrint.propTypes={copyStyles:PropTypes.bool,trigger:PropTypes.func.isRequired,content:PropTypes.func.isRequired},ReactToPrint.defaultProps={copyStyles:!0},module.exports=ReactToPrint;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-to-print",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Print React components in the browser",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 <div align="center">
-  <img src="coming-soon.jpg" />
+  <img src="https://user-images.githubusercontent.com/19170080/33643181-7bdcf3da-da0b-11e7-9463-a627a53ff25f.png" />
 </div>
@@ -11,3 +11,3 @@
 
-Print React components in the browser
+So you've created a React component but would love to give end users the ability to print out the contents of that component. This package aims to solve that by popping up a new print window with CSS styles copied over as well.  
 
@@ -20,2 +20,4 @@ ## Install
 
+[![Edit react-to-print](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6n0mo326mz)
+
 ## Usage
@@ -26,19 +28,52 @@
 
-class Example extends React.Component {
+import React from "react";
+import ReactToPrint from "react-to-print";
+import PropTypes from "prop-types";
 
+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>
+          <tr>
+            <td>data 1</td>
+            <td>data 2</td>
+            <td>data 3</td>
+          </tr>
+          <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
-          trigger={() => (
-            <a href="#">Print this out!</a>
-          )}
+        <ReactToPrint
+          trigger={() => <a href="#">Print this out!</a>}
           content={() => this.componentRef}
-         />               
-        <ComponentToPrint ref={(el) => this.componentRef = el} />
+        />
+        <ComponentToPrint ref={el => (this.componentRef = el)} />
       </div>
     );
-
   }
 }
+
+
 ```

New alerts

License Policy Violation

License

This 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

License

This 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

10914

increased by12.13%

Number of package files

12

increased by20%

Number of lines in readme file

77

increased by83.33%

Number of versions

94

increased by2.17%

Published versions last months

3

increased by200%

Published versions last two months

3

increased by200%

Published versions last week

2

increased by100%

Published versions last year

11

increased by22.22%

No dependency changes