@garage-panda/react-pdf-export - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

lib/components/PdfExport.d.ts

@@ -1,4 +0,4 @@
-import React, { MutableRefObject, RefObject } from 'react';
-import { HeadOptions } from '../types';
-import '../css/index.css';
+import React, { MutableRefObject, RefObject } from "react";
+import { HeadOptions } from "../types";
+import "../css/index.css";
 interface PdfExportProps {
@@ -5,0 +5,0 @@ containerRef: {

lib/components/PdfExport.js

@@ -34,7 +34,7 @@ "use strict";
     var attachObserverListener = function (mountNode, pdfContainer) {
-        observer.on('load', function () {
+        observer.on("load", function () {
             observer.removeListeners();
             containerRef.iframeRef.current.contentWindow.print();
-            mountNode.head.innerHTML = '';
-            mountNode.body.innerHTML = '';
+            mountNode.head.innerHTML = "";
+            mountNode.body.innerHTML = "";
         });
@@ -44,3 +44,3 @@ startWait(pdfContainer);
     var populateChildren = function (mountNode) {
-        var pdfContainer = mountNode.createElement('div');
+        var pdfContainer = mountNode.createElement("div");
         mountNode.body.appendChild(pdfContainer);
@@ -68,3 +68,3 @@ if (lazyLoad) {
         if (includeParentStyles) {
-            var parentStyles = document.querySelectorAll('style');
+            var parentStyles = document.querySelectorAll("style");
             parentStyles.forEach(function (style) { return common_utils_1.cloneStyle(mountNode, style); });
@@ -78,8 +78,18 @@ }
         return function () {
-            mountNode.head.innerHTML = '';
-            mountNode.body.innerHTML = '';
+            mountNode.head.innerHTML = "";
+            mountNode.body.innerHTML = "";
         };
     }, [options]);
-    return (react_1.default.createElement("iframe", { ref: containerRef.iframeRef, className: className + " " + (!showInDom ? 'react-pdf-export-hide' : '') }));
+    var styles = react_1.useMemo(function () {
+        if (!showInDom) {
+            return {
+                position: "absolute",
+                opacity: 0,
+                zIndex: -10,
+            };
+        }
+        return {};
+    }, [showInDom]);
+    return (react_1.default.createElement("iframe", { ref: containerRef.iframeRef, className: "" + className, style: styles }));
 };
 exports.default = PdfExport;

package.json

 {
   "name": "@garage-panda/react-pdf-export",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "A PDF generator for React applications",
@@ -13,3 +13,3 @@ "main": "lib/index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc && copy src\\css\\index.css lib\\css\\index.css",
+    "build": "tsc",
     "dev": "tsc -w"
@@ -16,0 +16,0 @@ },

README.md

@@ -1,4 +0,4 @@
-## react-pdf-export
+[![npm version](https://badge.fury.io/js/@garage-panda%2Freact-pdf-export.svg)](https://badge.fury.io/js/@garage-panda%2Freact-pdf-export)
 
-A PDF generator for React applications.
+# react-pdf-export
 
@@ -15,17 +15,23 @@ ## About
 
-Run
+```
+// with npm
 
-`npm i @garage-panda/react-pdf-export`
+npm i @garage-panda/react-pdf-export
 
-or
+// with yarn
 
-`yarn add @garage-panda/react-pdf-export`
+yarn add @garage-panda/react-pdf-export
+```
 
 Import the package
 
-`import { PdfExport, useGeneratePdf } from '@garage-panda/react-pdf-export';`
+```typescript
+import { PdfExport, useGeneratePdf } from "@garage-panda/react-pdf-export";
+```
 
 Retrieve the component and the useEffect
 
-`const { generatePdf, containerRef } = useGeneratePdf();`
+```typescript
+const { generatePdf, containerRef } = useGeneratePdf();
+```
 
@@ -44,12 +50,12 @@ That's it!
       <React.Fragment>
-      <PdfExport containerRef={containerRef}>
-        <h1>This is the content of the PDF in here</h1>
-        <div>
-          <p>Yes, you can put any child</p>
-          <div>Because it's awesome!</div>
-        </div>
-      </PdfExport>
-      <br />
-      <button onClick={generatePdf}>Generate PDF</button>
-    </React.Fragment>
+        <PdfExport containerRef={containerRef}>
+          <h1>This is the content of the PDF in here</h1>
+          <div>
+            <p>Yes, you can put any child</p>
+            <div>Because it's awesome!</div>
+          </div>
+        </PdfExport>
+
+        <button onClick={generatePdf}>Generate PDF</button>
+      </React.Fragment>
     );
@@ -56,0 +62,0 @@ }

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

14827

increased by1.79%

Lines of code

212

increased by2.91%

Number of lines in readme file

88

increased by7.32%

Worsened metrics

Number of package files

13

decreased by-7.14%

No dependency changes