Merge pull request #320 from gregnb/november-2020-updates

Updated devDependencies, examples and docs updates

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
-    project: "tsconfig.json",
+    project: "tsconfig.dev.json",
     sourceType: "module",
   },
   plugins: ["@typescript-eslint"],

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-  - 10
+  - 14
 
 script:
  - npm run -s build

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 2.12.0 (November 27th, 2020)
+
+- CHORE: added React/ReactDOM ^17 to allowed peerDependencies. Library still supports React >= 15, though expect a major release in the near-future that drops React 15 support, which will clear the way to removing the restriction that the top-level component being printed must be a class component
+- CHORE: upgraded all devDependencies. Big changes here include updating Typescript from 3 -> 4 and Webpack from 4 -> 5. While upgrading Webpack the minifier was changed from UglifyJS to Terser, resulting in a 5.7% reduced file size (14.1kb -> 13.3kb)
+- CHORE: Use Node ^14 for CLI tests
+- DOCUMENTATION: small improvements to the examples, including renaming them from `example` -> `examples`
+- DOCUMENTATION: added a note about finding the [`examples`](https://github.com/gregnb/react-to-print/tree/master/examples) folder
+- DOCUMENTATION [311](https://github.com/gregnb/react-to-print/issues/311): small type fix, thanks [nealeu](https://github.com/nealeu)
+- DOCUMENTATION: added a "Common Pitfalls" section to the README, starting with a note on using the library with a component wrapped in `connect` from `react-redux`
+
 ## 2.11.0 (October 30th, 2020)
 
 - FIX/FEATURE [285](https://github.com/gregnb/react-to-print/pull/285): Adds a new `fonts` prop which allows the passing of custom fonts. Previously custom fonts were not loaded into the print window

README.md

@@ -1,6 +1,6 @@
-<div align="center">
-  <img src="https://user-images.githubusercontent.com/19170080/33672781-14f1b03e-da79-11e7-95fe-4ce15f170230.png" />
-</div>
+<p align="center">
+  <img width="300" height="300" src="./logo.png" alt="react-to-print logo">
+</p>
 
 # ReactToPrint - Print React components in the browser
 
@@ -62,12 +62,10 @@ For functional components, use the `useReactToPrint` hook, which accepts an obje
 
 - `onAfterPrint` may fire immediately (before the print dialog is closed) on newer versions of Safari where [`window.print`](https://developer.mozilla.org/en-US/docs/Web/API/Window/print) does not block
 
-## Common Pitfalls
-
-- The `connect` method from `react-redux` returns a functional component that cannot be assigned a reference to be used within the `content` props' callback in `react-to-print`. To use a component wrapped in `connect` within `content` create an intermediate class component that simply renders your component wrapped in `connect`. See [280](https://github.com/gregnb/react-to-print/issues/280) for more.
-
 ## Examples
 
+For full examples please see the [`examples`](https://github.com/gregnb/react-to-print/tree/master/examples) folder.
+
 ```jsx
 export class ComponentToPrint extends React.PureComponent {
   render() {
@@ -190,9 +188,13 @@ const Example = () => {
 };
 ```
 
+## Common Pitfalls
+
+- The `connect` method from `react-redux` returns a functional component that cannot be assigned a reference to be used within the `content` props' callback in `react-to-print`. To use a component wrapped in `connect` within `content` create an intermediate class component that simply renders your component wrapped in `connect`. See [280](https://github.com/gregnb/react-to-print/issues/280) for more.
+
 ## Running locally
 
-*NOTE*: Node ^10 is required to build the library locally. We use Node ^10 for our CLI checks.
+*NOTE*: Node >=10 is required to build the library locally. We use Node ^14 for our CLI checks.
 
 ## FAQ
 

example/ClassComponent/index.tsx → examples/ClassComponent/index.tsx

@@ -3,10 +3,16 @@ import * as React from "react";
 import { ComponentToPrint } from "../ComponentToPrint";
 import ReactToPrint from "../../src/index";
 
-export class ClassComponent extends React.PureComponent<{}, { isLoading: boolean, text: string }> {
+type Props = Record<string, unknown>;
+type State = {
+  isLoading: boolean;
+  text: string;
+};
+
+export class ClassComponent extends React.PureComponent<Props, State> {
   componentRef: ComponentToPrint | null = null;
 
-  constructor(props: Readonly<{}>) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -47,10 +53,10 @@ export class ClassComponent extends React.PureComponent<{}, { isLoading: boolean
     // to the root node of the returned component as it will be overwritten.
 
     // Bad: the `onClick` here will be overwritten by `react-to-print`
-    // return <a href="#" onClick={() => alert('This will not work')}>Print this out!</a>;
+    // return <button onClick={() => alert('This will not work')}>Print this out!</button>;
 
     // Good
-    return <a href="#">Print using a Class Component</a>;
+    return <button>Print using a Class Component</button>;
   }
 
   render() {
@@ -65,7 +71,7 @@ export class ClassComponent extends React.PureComponent<{}, { isLoading: boolean
           removeAfterPrint
           trigger={this.reactToPrintTrigger}
         />
-        {this.state.isLoading && <p className="indicator">Loading...</p>}
+        {this.state.isLoading && <p className="indicator">onBeforeGetContent: Loading...</p>}
         <ComponentToPrint ref={this.setComponentRef} text={this.state.text} />
       </div>
     );

example/ClassComponentContextConsumer/index.tsx → examples/ClassComponentContextConsumer/index.tsx

@@ -3,10 +3,16 @@ import * as React from "react";
 import { ComponentToPrint } from "../ComponentToPrint";
 import ReactToPrint, { PrintContextConsumer } from "../../src/index";
 
-export class ClassComponentContextConsumer extends React.PureComponent<{}, { isLoading: boolean, text: string }> { // tslint:disable-line max-line-length
+type Props = Record<string, unknown>;
+type State = {
+  isLoading: boolean;
+  text: string;
+};
+
+export class ClassComponentContextConsumer extends React.PureComponent<Props, State> {
   componentRef: ComponentToPrint | null = null;
 
-  constructor(props: Readonly<{}>) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -61,7 +67,7 @@ export class ClassComponentContextConsumer extends React.PureComponent<{}, { isL
             )}
           </PrintContextConsumer>
         </ReactToPrint>
-        {this.state.isLoading && <p className="indicator">Loading...</p>}
+        {this.state.isLoading && <p className="indicator">onBeforeGetContent: Loading...</p>}
         <ComponentToPrint ref={this.setComponentRef} text={this.state.text} />
       </div>
     );

example/ComponentToPrint/index.tsx → examples/ComponentToPrint/index.tsx

@@ -1,6 +1,13 @@
+// TODO: why does the dev build not pick this up automatically?
+// https://github.com/microsoft/TypeScript-React-Starter/issues/12#issuecomment-369113072
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path='../index.d.ts'/>
+
 import * as React from "react";
 
-type Props = { // tslint:disable-line interface-over-type-literal
+import image from '../test_image.png';
+
+type Props = {
   text: string,
 };
 
@@ -26,20 +33,20 @@ export class ComponentToPrint extends React.PureComponent<Props, State> {
     }
   }
 
-  private handleCheckboxOnClick = () => this.setState({ checked: !this.state.checked });
+  private handleCheckboxOnChange = () => this.setState({ checked: !this.state.checked });
 
   private setRef = (ref: HTMLCanvasElement) => this.canvasEl = ref;
 
   public render() {
     return (
       <div className="relativeCSS">
         <div className="flash" />
-        <img alt="A test image" src="example/test_image.png" />
-        <table className="testclass">
+        <img alt="A test image" src={image as string} />
+        <table className="testClass">
           <thead>
           <tr>
-            <th style={{ color: "#FF0000" }}>Column One</th>
-            <th className="testth">Column Two</th>
+            <th className="column1">Column One</th>
+            <th>Column Two</th>
           </tr>
           </thead>
           <tbody>
@@ -48,7 +55,7 @@ export class ComponentToPrint extends React.PureComponent<Props, State> {
             <td>
               <input
                 checked={this.state.checked}
-                onClick={this.handleCheckboxOnClick}
+                onChange={this.handleCheckboxOnChange}
                 type="checkbox"
               />
             </td>
@@ -85,11 +92,6 @@ export class ComponentToPrint extends React.PureComponent<Props, State> {
           </tr>
           </tbody>
         </table>
-          <div className="container">
-            <div>
-              <img alt="Swan" src="https://free-images.com/or/a31c/swan_flying_bird_fly.jpg" width="300px"/>
-            </div>
-          </div>
       </div>
     );
   }

example/FunctionalComponent/index.tsx → examples/FunctionalComponent/index.tsx

@@ -6,8 +6,7 @@ import ReactToPrint from "../../src/index";
 export const FunctionalComponent = () => {
   const componentRef = React.useRef(null);
 
-  // TODO: want to make this `null` default but TS complains
-  const onBeforeGetContentResolve = React.useRef(Promise.resolve);
+  const onBeforeGetContentResolve = React.useRef<(() => void) | null>(null);
 
   const [loading, setLoading] = React.useState(false);
   const [text, setText] = React.useState("old boring text");
@@ -25,7 +24,7 @@ export const FunctionalComponent = () => {
     setLoading(true);
     setText("Loading new text...");
 
-    return new Promise((resolve: any) => {
+    return new Promise<void>((resolve) => {
       onBeforeGetContentResolve.current = resolve;
 
       setTimeout(() => {
@@ -68,7 +67,7 @@ export const FunctionalComponent = () => {
         removeAfterPrint
         trigger={reactToPrintTrigger}
       />
-      {loading && <p className="indicator">Loading...</p>}
+      {loading && <p className="indicator">onBeforeGetContent: Loading...</p>}
       <ComponentToPrint ref={componentRef} text={text} />
     </div>
   );

example/FunctionalComponentWithHook/index.tsx → examples/FunctionalComponentWithHook/index.tsx

@@ -6,8 +6,7 @@ import { useReactToPrint } from "../../src/index";
 export const FunctionalComponentWithHook = () => {
   const componentRef = React.useRef(null);
 
-  // TODO: want to make this `null` default but TS complains
-  const onBeforeGetContentResolve = React.useRef(Promise.resolve);
+  const onBeforeGetContentResolve = React.useRef<(() => void) | null>(null);
 
   const [loading, setLoading] = React.useState(false);
   const [text, setText] = React.useState("old boring text");
@@ -25,7 +24,7 @@ export const FunctionalComponentWithHook = () => {
     setLoading(true);
     setText("Loading new text...");
 
-    return new Promise((resolve: any) => {
+    return new Promise<void>((resolve) => {
       onBeforeGetContentResolve.current = resolve;
 
       setTimeout(() => {
@@ -57,7 +56,7 @@ export const FunctionalComponentWithHook = () => {
 
   return (
     <div>
-      {loading && <p className="indicator">Loading...</p>}
+      {loading && <p className="indicator">onBeforeGetContent: Loading...</p>}
       <button onClick={handlePrint}>
         Print using a Functional Component with the useReactToPrint hook
       </button>

examples/index.d.ts

@@ -0,0 +1,5 @@
+// https://webpack.js.org/guides/typescript/
+declare module "*.png" {
+  const content: any;
+  export default content;
+}

example/index.tsx → examples/index.tsx

@@ -7,12 +7,13 @@ import { FunctionalComponent } from "./FunctionalComponent";
 import { FunctionalComponentWithHook } from "./FunctionalComponentWithHook";
 import "./relativecss/test.css";
 
-interface State {
+type Props = Record<string, unknown>;
+type State = {
   text: string;
   isLoading: boolean;
 }
 
-class Example extends React.Component<{}, State> {
+class Example extends React.Component<Props, State> {
   render() {
     return (
       <>

example/relativecss/test.css → examples/relativecss/test.css

@@ -1,13 +1,18 @@
-.relativeCSS {
- border: solid 1px #FF0000;
-}
-
-.testclass {
-  background: rgba(76, 175, 80, 0.3);
+.column1 {
+  color: #FF0000;
 }
 
 .indicator {
   font-size: 2rem;
   color: #FF0000;
   font-weight: 700;
 }
+
+.relativeCSS {
+ border: solid 1px #FF0000;
+}
+
+.testClass {
+  background: rgba(76, 175, 80, 0.3);
+}
+

index.html

@@ -1,17 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>ReactToPrint Example</title>
-    <style>
-        .testclass {
-            background-color: #000;
-        }
-
-        .testth {
-            color: #FF0000;
-        }
-    </style>
-    <link rel="stylesheet" href="../example/relativecss/test.css">
+    <title>ReactToPrint Examples</title>
+    <h1>Open the developer console to see lifecycle method logging</h1>
+    <link href="../examples/relativecss/test.css" type="text/css">
 </head>
 <body class="body-class">
 <div id="app-root"></div>