From 1865f5a9ac2bd7ae7bdb6cd4c3fe386355ad91f7 Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Fri, 8 Nov 2019 14:49:51 -0300
Subject: [PATCH 01/16] refactor: NoPrint component

---
 package.json    |  3 ++-
 src/NoPrint.jsx | 12 +++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 29c170e..c17f7f2 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.3",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-import-css": "^0.1.6",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.6",
@@ -32,7 +33,7 @@
     "eslint": "^4.2.0",
     "eslint-plugin-react": "^7.1.0",
     "prop-types": "^15.6.1",
-    "react": "^16.4.0",
+    "react": "^16.8.0",
     "react-dom": "^16.4.0",
     "rollup": "^0.60.7",
     "rollup-plugin-babel": "^3.0.4",
diff --git a/src/NoPrint.jsx b/src/NoPrint.jsx
index a0ba0e2..3524a1b 100644
--- a/src/NoPrint.jsx
+++ b/src/NoPrint.jsx
@@ -7,11 +7,9 @@ const propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default class NoPrint extends React.PureComponent {
-  render() {
-    const { children, force } = this.props;
-    const force_ = force ? s._force : '';
-    return <div className={`${s.root} ${force_}`}>{children}</div>;
-  }
-}
+const NoPrint = ({ children, force }) => {
+  const force_ = force ? s._force : '';
+  return <div className={`${s.root} ${force_}`}>{children}</div>;
+};
+
 NoPrint.propTypes = propTypes;

From 0a39b4c4307eacabb0561abef495859dd25c67f2 Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Sat, 9 Nov 2019 18:48:52 -0300
Subject: [PATCH 02/16] refactor: PrintProvider component

---
 src/Print.jsx               |  88 ++++++++----------
 src/PrintProvider.jsx       | 173 +++++++++++++++++++-----------------
 src/PrintProviderContext.js |  15 ++++
 3 files changed, 142 insertions(+), 134 deletions(-)
 create mode 100644 src/PrintProviderContext.js

diff --git a/src/Print.jsx b/src/Print.jsx
index 8fc8117..363bebb 100644
--- a/src/Print.jsx
+++ b/src/Print.jsx
@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import { usePrintProvider } from './PrintProviderContext';
 import PropTypes from 'prop-types';
-
-import PrintProvider from './PrintProvider';
 import { debug } from './common';
 import s from './Print.css';
 
@@ -13,76 +12,65 @@ const propTypes = {
   exclusive: PropTypes.bool,
   printOnly: PropTypes.bool
 };
-const contextTypes = PrintProvider.childContextTypes;
-
-export default class Print extends React.Component {
-
-  constructor(props) {
-    super(props);
 
-    this.state = {
-      printOffsetLeft: 0,
-      printOffsetTop: 0
-    };
-  }
-  componentDidMount() {
+const Print = props => {
+  const [state, setState] = useState({ printOffsetLeft: 0, printOffsetTop: 0 });
+  const { regPrintable, unregPrintable } = usePrintProvider();
+  const { printOffsetLeft, printOffsetTop } = state;
+  const printElement = useRef(null);
+  const main_ = (props.main || props.single) ? s._main : '';
+  const excl_ = (props.exclusive || props.printOnly) ? s._exclusive : '';
+  const isPrint = window.matchMedia('print').matches;
+  const offset_ = ((printOffsetTop || printOffsetLeft) && main_ && isPrint) ?
+    { marginTop: -printOffsetTop, marginLeft: -printOffsetLeft } : {};
+  const globalClassName = 'react-easy-print-print'; // using in hiddenAll
+  const className = `${globalClassName} ${s.root} ${main_} ${excl_}`;
 
-    if (this.props.name) {
-      debug('init printable', this.props.name);
-      const isSingle = (this.props.main || this.props.single);
-      this.context.printProvider && this.context.printProvider.regPrintable(this.props.name, <Print {...this.props} />, isSingle);
+  useEffect(() => {
+    if (props.name) {
+      debug('init printable', props.name);
+      const isSingle = (props.main || props.single);
+      regPrintable(name, <Print {...props} />, isSingle);
     }
 
-    if (this.props.main || this.props.single) {
+    if (props.main || props.single) {
 
       window.matchMedia('print').onchange = () => {
         const isPrint = window.matchMedia('print').matches;
 
         if (isPrint) {
           const bodyRect = document.body.getBoundingClientRect();
-          const elem = this.printElement;
+          const elem = printElement;
           const elemRect = elem && elem.getBoundingClientRect();
           const printOffsetLeft = elemRect && (elemRect.left - bodyRect.left);
           const printOffsetTop = elemRect && (elemRect.top - bodyRect.top);
 
-          this.setState({
+          setState({
             printOffsetTop,
             printOffsetLeft,
           });
         } else {
-          this.setState({
+          setState({
             printOffsetTop: 0,
             printOffsetLeft: 0
-          })
+          });
         }
       };
     }
-  }
 
-  componentWillUnmount() {
-    if (this.props.name) {
-      debug('remove printable', this.props.name);
-      const isSingle = (this.props.main || this.props.single);
-      this.context.printProvider && this.context.printProvider.unregPrintable(this.props.name, isSingle);
-    }
-
-    if (this.props.main || this.props.single) {
-      window.matchMedia('print').onchange = null;
-    }
-  }
-
-  render() {
+    return () => {
+      if (props.name) {
+        debug('remove printable', props.name);
+        const isSingle = (props.main || props.single);
+        unregPrintable(props.name, isSingle);
+      }
+  
+      if (props.main || props.single) {
+        window.matchMedia('print').onchange = null;
+      }
+    };
+  });
+  return <div ref={printElement} style={offset_} className={className}>{props.children}</div>;
+};
 
-    const { children, main, single, exclusive, printOnly } = this.props;
-    const { printOffsetLeft, printOffsetTop } = this.state;
-    const main_ = (main || single) ? s._main : '';
-    const excl_ = (exclusive || printOnly) ? s._exclusive : '';
-    const isPrint = window.matchMedia('print').matches;
-    const offset_ = ((printOffsetTop || printOffsetLeft) && main_ && isPrint) ? { marginTop: -printOffsetTop, marginLeft: -printOffsetLeft } : {};
-    const globalClassName = 'react-easy-print-print'; // using in hiddenAll
-    const className = `${globalClassName} ${s.root} ${main_} ${excl_}`;
-    return <div ref={(el) => this.printElement = el} style={offset_} className={className}>{children}</div>;
-  }
-}
 Print.propTypes = propTypes;
-Print.contextTypes = contextTypes;
diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index 7fc68c5..273bc88 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -1,125 +1,130 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import PrintProviderContext from './PrintProviderContext';
 import s from './PrintProvider.css';
 import { spliced, debug } from './common';
 
 export const propTypes = {
   loose: PropTypes.bool,
   children: PropTypes.node.isRequired,
-  invert: PropTypes.bool,
+  invert: PropTypes.bool
 };
 
-export const childContextTypes = {
-  printProvider: PropTypes.shape({
-    regPrintable: PropTypes.func.isRequired,
-    unregPrintable: PropTypes.func.isRequired,
-    isPrint: PropTypes.bool.isRequired,
-  }).isRequired,
+const createRender = children => {
+  const el = document.createElement('div');
+  el.id = 'render';
+  document.body.appendChild(el);
+  ReactDOM.render(<div className={s.printRender}>{children}</div>, el);
 };
 
-export default class PrintProvider extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isInPrintPreview: false,
-      printableNodes: [],
-    };
-    this.printableRegistry = {};
-    window.matchMedia('print').onchange = () => {
-      debug('toggle print mode', window.matchMedia('print').matches);
-      this.setState({ isInPrintPreview: window.matchMedia('print').matches });
-    };
+const deleteRender = () => {
+  const el = document.getElementById('render');
+  el && document.body.removeChild(el);
+};
 
-    this.hasSingle = false;
-  }
+const PrintProvider = props => {
 
-  getChildContext() {
-    return {
-      printProvider: {
-        isPrint: window.matchMedia('print').matches,
-        regPrintable: this.regPrintable.bind(this),
-        unregPrintable: this.unregPrintable.bind(this),
-      },
-    };
-  }
+  const [state, setState] = useState({ isInPrintPreview, printableNodes });
+  const { isInPrintPreview, printableNodes } = state;
+
+  const printableRegistry = useRef({});
+  const hasSingle = useRef(false);
 
   // hideAll - is being used to cover all of React Portals, popups and modals and etc.
-  hideAll() {
+  const hideAll = () => {
     document.body.classList.add(s.hiddenAll);
-    this.hasSingle = true;
-  }
+    hasSingle.current = true;
+  };
 
-  unhideAll() {
+  const unhideAll = () =>  {
     document.body.classList.remove(s.hiddenAll);
-    this.hasSingle = false;
-  }
+    hasSingle.current = false;
+  };
 
-  regPrintable(key, node) {
-    const loose = this.props.loose || this.props.invert;
+  const regPrintable = (key, node) => {
+    const loose = props.loose || props.invert;
     const isSingle = node.props.single || node.props.main;
-    const { hasSingle } = this;
 
     debug('reg printable', key, node);
 
-    if (this.printableRegistry[key] !== undefined || loose) return;
-    setTimeout(() => this.setState({
-      printableNodes: this.state.printableNodes.concat(node),
-    }), 0);
-    this.printableRegistry[key] = this.state.printableNodes.length;
+    if (printableRegistry.current[key] !== undefined || loose) return;
+    setTimeout(
+      () =>
+        setState({
+          printableNodes: state.printableNodes.concat(node),
+          isInPrintPreview,
+        }),
+      0
+    );
+    printableRegistry.current[key] = state.printableNodes.length;
 
     if (isSingle && !hasSingle) {
-      this.hideAll();
+      hideAll();
     } else if (isSingle) {
-      console.warn(new Error('react-easy-print warning \n\t you\'re using more than one `single` Print component'));
+      console.warn(
+        new Error(
+          'react-easy-print warning \n\t you\'re using more than one `single` Print component'
+        )
+      );
     }
-  }
-
-  unregPrintable(key, isSingle) {
-    const loose = this.props.loose || this.props.invert;
-    if (this.printableRegistry[key] === undefined || this.state.isInPrintPreview || loose) return;
-    this.setState({
-      printableNodes: spliced(this.state.printableNodes, this.printableRegistry[key]),
+  };
+
+  const unregPrintable = (key, isSingle) => {
+    const loose = props.loose || props.invert;
+    if (
+      printableRegistry[key] === undefined ||
+      state.isInPrintPreview ||
+      loose
+    )
+      return;
+    setState({
+      printableNodes: spliced(
+        state.printableNodes,
+        printableRegistry[key]
+      ),
+      isInPrintPreview,
+    });
+    printableRegistry.current = Object.assign({}, printableRegistry, {
+      [key]: undefined
     });
-    this.printableRegistry = Object.assign({}, this.printableRegistry, { [key]: undefined });
     if (isSingle) {
-      this.unhideAll();
+      unhideAll();
     }
-  }
-
-  createRender(children) {
-    const el = document.createElement('div');
-    el.id = 'render';
-    document.body.appendChild(el);
+  };
 
-    ReactDOM.render(<div className={s.printRender} >{children}</div>, el);
-  }
-
-  deleteRender() {
-    const el = document.getElementById('render');
-    el && document.body.removeChild(el);
-  }
-
-  render() {
-    const { isInPrintPreview, printableNodes } = this.state;
-    const loose = this.props.loose || this.props.invert;
-    const { hasSingle } = this;
+  useEffect(() => {
+    window.matchMedia('print').onchange = () => {
+      debug('toggle print mode', window.matchMedia('print').matches);
+      setState({ isInPrintPreview: window.matchMedia('print').matches, printableNodes });
+    };
+  });
 
+  useEffect(() => {
     if (isInPrintPreview && printableNodes.length && !loose && !hasSingle) {
       debug('render printable only', printableNodes);
       const children = React.Children.map(printableNodes, (child, key) => {
         return React.cloneElement(child, { key });
       });
-
-      this.createRender(<div>{children}</div>);
+      createRender(<div>{children}</div>);
     }
-    setTimeout(() => this.deleteRender(), 0);
-
+    setTimeout(() => deleteRender(), 0);
+  });
+  
+  useEffect(() => {
     debug('render everything', isInPrintPreview, printableNodes.length, !loose);
-    const loose_ = loose ? s.loose : '';
-    const invert_ = this.props.invert ? s.invert : '';
-    return <div className={`${s.wrap} ${loose_} ${invert_} `}>{this.props.children}</div>;
-  }
-}
+  });
+
+  const loose = props.loose || props.invert;
+  const loose_ = loose ? s.loose : '';
+  const invert_ = props.invert ? s.invert : '';
+  return (
+    <PrintProviderContext.Provider unregPrintable={unregPrintable} regPrintable={regPrintable}>
+      <div className={`${s.wrap} ${loose_} ${invert_} `}>
+        {props.children}
+      </div>
+    </PrintProviderContext.Provider>
+  );
+};
+
 PrintProvider.propTypes = propTypes;
-PrintProvider.childContextTypes = childContextTypes;
diff --git a/src/PrintProviderContext.js b/src/PrintProviderContext.js
new file mode 100644
index 0000000..9f24bc5
--- /dev/null
+++ b/src/PrintProviderContext.js
@@ -0,0 +1,15 @@
+
+import React, { useContext } from 'react';
+
+const PrintProviderContext = React.createContext();
+
+export const usePrintProvider = () => {
+  const { regPrintable, unregPrintable } = useContext(PrintProviderContext);
+
+  return {
+    regPrintable,
+    unregPrintable
+  };
+};
+
+export default PrintProviderContext;
\ No newline at end of file

From 3da9e0e4bec9c2e1473d4c5a59cd3201ba5657a2 Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Sat, 9 Nov 2019 18:51:15 -0300
Subject: [PATCH 03/16] fix: export default PrintProvider

---
 src/PrintProvider.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index 273bc88..3531d0e 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -127,4 +127,6 @@ const PrintProvider = props => {
   );
 };
 
+export default PrintProvider;
+
 PrintProvider.propTypes = propTypes;

From 2162f84a1287b159c423735452ccff8d0394d376 Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Sat, 9 Nov 2019 18:53:08 -0300
Subject: [PATCH 04/16] fix: add missing export defaults

---
 src/NoPrint.jsx | 3 +++
 src/Print.jsx   | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/src/NoPrint.jsx b/src/NoPrint.jsx
index 3524a1b..76796fd 100644
--- a/src/NoPrint.jsx
+++ b/src/NoPrint.jsx
@@ -13,3 +13,6 @@ const NoPrint = ({ children, force }) => {
 };
 
 NoPrint.propTypes = propTypes;
+
+export default NoPrint;
+
diff --git a/src/Print.jsx b/src/Print.jsx
index 363bebb..717daed 100644
--- a/src/Print.jsx
+++ b/src/Print.jsx
@@ -74,3 +74,5 @@ const Print = props => {
 };
 
 Print.propTypes = propTypes;
+
+export default Print; 

From c9f6153298b75d1a604a02ab042539ba6f1bbaa0 Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Mon, 11 Nov 2019 22:31:04 -0300
Subject: [PATCH 05/16] feat: split state into multiple useStates

---
 src/Print.jsx         | 16 ++++++----------
 src/PrintProvider.jsx | 26 +++++++++++---------------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/Print.jsx b/src/Print.jsx
index 717daed..1911ef9 100644
--- a/src/Print.jsx
+++ b/src/Print.jsx
@@ -14,9 +14,9 @@ const propTypes = {
 };
 
 const Print = props => {
-  const [state, setState] = useState({ printOffsetLeft: 0, printOffsetTop: 0 });
+  const [printOffsetLeft, setPrintOffsetLeft] = useState(0);
+  const [printOffsetTop, setPrintOffsetTop] = useState(0);
   const { regPrintable, unregPrintable } = usePrintProvider();
-  const { printOffsetLeft, printOffsetTop } = state;
   const printElement = useRef(null);
   const main_ = (props.main || props.single) ? s._main : '';
   const excl_ = (props.exclusive || props.printOnly) ? s._exclusive : '';
@@ -45,15 +45,11 @@ const Print = props => {
           const printOffsetLeft = elemRect && (elemRect.left - bodyRect.left);
           const printOffsetTop = elemRect && (elemRect.top - bodyRect.top);
 
-          setState({
-            printOffsetTop,
-            printOffsetLeft,
-          });
+          setPrintOffsetLeft(printOffsetLeft);
+          setPrintOffsetTop(printOffsetTop);
         } else {
-          setState({
-            printOffsetTop: 0,
-            printOffsetLeft: 0
-          });
+          setPrintOffsetLeft(0);
+          setPrintOffsetTop(0);
         }
       };
     }
diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index 3531d0e..cdc1565 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -25,8 +25,8 @@ const deleteRender = () => {
 
 const PrintProvider = props => {
 
-  const [state, setState] = useState({ isInPrintPreview, printableNodes });
-  const { isInPrintPreview, printableNodes } = state;
+  const [isInPrintPreview, setIsInPrintPreview] = useState(false);
+  const [printableNodes, setPrintableNodes ] = useState([]);
 
   const printableRegistry = useRef({});
   const hasSingle = useRef(false);
@@ -51,13 +51,10 @@ const PrintProvider = props => {
     if (printableRegistry.current[key] !== undefined || loose) return;
     setTimeout(
       () =>
-        setState({
-          printableNodes: state.printableNodes.concat(node),
-          isInPrintPreview,
-        }),
+        setPrintableNodes(printableNodes.concat(node)),
       0
     );
-    printableRegistry.current[key] = state.printableNodes.length;
+    printableRegistry.current[key] = printableNodes.length;
 
     if (isSingle && !hasSingle) {
       hideAll();
@@ -74,17 +71,16 @@ const PrintProvider = props => {
     const loose = props.loose || props.invert;
     if (
       printableRegistry[key] === undefined ||
-      state.isInPrintPreview ||
+      isInPrintPreview ||
       loose
     )
       return;
-    setState({
-      printableNodes: spliced(
-        state.printableNodes,
+    setPrintableNodes(
+      spliced(
+        printableNodes,
         printableRegistry[key]
-      ),
-      isInPrintPreview,
-    });
+      )
+    );
     printableRegistry.current = Object.assign({}, printableRegistry, {
       [key]: undefined
     });
@@ -96,7 +92,7 @@ const PrintProvider = props => {
   useEffect(() => {
     window.matchMedia('print').onchange = () => {
       debug('toggle print mode', window.matchMedia('print').matches);
-      setState({ isInPrintPreview: window.matchMedia('print').matches, printableNodes });
+      setIsInPrintPreview(window.matchMedia('print').matches);
     };
   });
 

From 19b46c0ef112f53afd81aeca06796cf703220eb3 Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Mon, 11 Nov 2019 22:33:32 -0300
Subject: [PATCH 06/16] fix: replace Object.assign with spread operator

---
 src/PrintProvider.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index cdc1565..0afdbc7 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -81,9 +81,10 @@ const PrintProvider = props => {
         printableRegistry[key]
       )
     );
-    printableRegistry.current = Object.assign({}, printableRegistry, {
+    printableRegistry.current = {
+      ...printableRegistry,
       [key]: undefined
-    });
+    };
     if (isSingle) {
       unhideAll();
     }

From 888db3189726126affc5ec91bc2f7c524bbbfccc Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Thu, 14 Nov 2019 09:44:23 -0300
Subject: [PATCH 07/16] fix: add current to 'printableRegistry' mutations

---
 src/PrintProvider.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index 0afdbc7..2564d4c 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -70,7 +70,7 @@ const PrintProvider = props => {
   const unregPrintable = (key, isSingle) => {
     const loose = props.loose || props.invert;
     if (
-      printableRegistry[key] === undefined ||
+      printableRegistry.current[key] === undefined ||
       isInPrintPreview ||
       loose
     )
@@ -78,11 +78,11 @@ const PrintProvider = props => {
     setPrintableNodes(
       spliced(
         printableNodes,
-        printableRegistry[key]
+        printableRegistry.current[key]
       )
     );
     printableRegistry.current = {
-      ...printableRegistry,
+      ...printableRegistry.current,
       [key]: undefined
     };
     if (isSingle) {

From 1656f05e671b39eab49c792f01c9abb742e23706 Mon Sep 17 00:00:00 2001
From: Alexander Mextner <a-x-@users.noreply.github.com>
Date: Sat, 23 Nov 2019 16:31:06 +0300
Subject: [PATCH 08/16] NoPrint: keep component name in devtools by using named
 function

---
 src/NoPrint.jsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/NoPrint.jsx b/src/NoPrint.jsx
index 76796fd..1c425f9 100644
--- a/src/NoPrint.jsx
+++ b/src/NoPrint.jsx
@@ -7,12 +7,9 @@ const propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-const NoPrint = ({ children, force }) => {
+export default function NoPrint ({ children, force }) {
   const force_ = force ? s._force : '';
   return <div className={`${s.root} ${force_}`}>{children}</div>;
-};
+}
 
 NoPrint.propTypes = propTypes;
-
-export default NoPrint;
-

From 0275379bdb29abe8890285f769de484106ab9490 Mon Sep 17 00:00:00 2001
From: Alexander Mextner <a-x-@users.noreply.github.com>
Date: Sat, 23 Nov 2019 16:33:38 +0300
Subject: [PATCH 09/16] Print: keep component name in devtools by using named
 function

---
 src/Print.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/Print.jsx b/src/Print.jsx
index 1911ef9..8454692 100644
--- a/src/Print.jsx
+++ b/src/Print.jsx
@@ -13,7 +13,7 @@ const propTypes = {
   printOnly: PropTypes.bool
 };
 
-const Print = props => {
+export default function Print (props) {
   const [printOffsetLeft, setPrintOffsetLeft] = useState(0);
   const [printOffsetTop, setPrintOffsetTop] = useState(0);
   const { regPrintable, unregPrintable } = usePrintProvider();
@@ -67,8 +67,6 @@ const Print = props => {
     };
   });
   return <div ref={printElement} style={offset_} className={className}>{props.children}</div>;
-};
+}
 
 Print.propTypes = propTypes;
-
-export default Print; 

From c58fb54359aa11e24a68e02064f239f3c43a9c4f Mon Sep 17 00:00:00 2001
From: Alexander Mextner <a-x-@users.noreply.github.com>
Date: Sat, 23 Nov 2019 16:37:43 +0300
Subject: [PATCH 10/16] PrintProviderContext: eof

---
 src/PrintProviderContext.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/PrintProviderContext.js b/src/PrintProviderContext.js
index 9f24bc5..4e2d6b4 100644
--- a/src/PrintProviderContext.js
+++ b/src/PrintProviderContext.js
@@ -12,4 +12,4 @@ export const usePrintProvider = () => {
   };
 };
 
-export default PrintProviderContext;
\ No newline at end of file
+export default PrintProviderContext;

From 7aec3f1fd724d9a6e97d27f4c609b5b71eeefefb Mon Sep 17 00:00:00 2001
From: Alexander Mextner <a-x-@users.noreply.github.com>
Date: Sat, 23 Nov 2019 16:39:52 +0300
Subject: [PATCH 11/16] PrintProvider: keep component name in devtools by using
 named function

---
 src/PrintProvider.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index 2564d4c..109de1b 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -23,7 +23,7 @@ const deleteRender = () => {
   el && document.body.removeChild(el);
 };
 
-const PrintProvider = props => {
+export default function PrintProvider (props) {
 
   const [isInPrintPreview, setIsInPrintPreview] = useState(false);
   const [printableNodes, setPrintableNodes ] = useState([]);
@@ -124,6 +124,4 @@ const PrintProvider = props => {
   );
 };
 
-export default PrintProvider;
-
 PrintProvider.propTypes = propTypes;

From b82b58d7ea341333bfad8516edc5b5c4306ead59 Mon Sep 17 00:00:00 2001
From: Alexander Mextner <a-x-@users.noreply.github.com>
Date: Sat, 23 Nov 2019 16:51:58 +0300
Subject: [PATCH 12/16] =?UTF-8?q?PrintProvider:=20use=20uniq=20id=20?=
 =?UTF-8?q?=F0=9F=98=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/PrintProvider.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index 109de1b..bc29fa6 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -11,15 +11,17 @@ export const propTypes = {
   invert: PropTypes.bool
 };
 
+const ID = 'react-easy-print-render';
+
 const createRender = children => {
   const el = document.createElement('div');
-  el.id = 'render';
+  el.id = ID;
   document.body.appendChild(el);
   ReactDOM.render(<div className={s.printRender}>{children}</div>, el);
 };
 
 const deleteRender = () => {
-  const el = document.getElementById('render');
+  const el = document.getElementById(ID);
   el && document.body.removeChild(el);
 };
 

From 3f6e2702601e5cfe5f92e8e0c634ae6256626e7f Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Sat, 23 Nov 2019 19:15:47 -0300
Subject: [PATCH 13/16] Print: add empy array to useEffect deps

---
 src/Print.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Print.jsx b/src/Print.jsx
index 8454692..22f9abe 100644
--- a/src/Print.jsx
+++ b/src/Print.jsx
@@ -40,7 +40,7 @@ export default function Print (props) {
 
         if (isPrint) {
           const bodyRect = document.body.getBoundingClientRect();
-          const elem = printElement;
+          const elem = printElement.current;
           const elemRect = elem && elem.getBoundingClientRect();
           const printOffsetLeft = elemRect && (elemRect.left - bodyRect.left);
           const printOffsetTop = elemRect && (elemRect.top - bodyRect.top);
@@ -65,7 +65,7 @@ export default function Print (props) {
         window.matchMedia('print').onchange = null;
       }
     };
-  });
+  }, []);
   return <div ref={printElement} style={offset_} className={className}>{props.children}</div>;
 }
 

From bf1ccc214a9ab16b133e62fe1ca4aeb1c0f10258 Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Sat, 23 Nov 2019 19:22:51 -0300
Subject: [PATCH 14/16] PrintProvider: move useEffects to top and fix hasSingle
 validation

---
 src/PrintProvider.jsx | 53 ++++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index bc29fa6..56236c4 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -33,6 +33,32 @@ export default function PrintProvider (props) {
   const printableRegistry = useRef({});
   const hasSingle = useRef(false);
 
+  const loose = props.loose || props.invert;
+  const loose_ = loose ? s.loose : '';
+  const invert_ = props.invert ? s.invert : '';
+
+  useEffect(() => {
+    window.matchMedia('print').onchange = () => {
+      debug('toggle print mode', window.matchMedia('print').matches);
+      setIsInPrintPreview(window.matchMedia('print').matches);
+    };
+  });
+
+  useEffect(() => {
+    if (isInPrintPreview && printableNodes.length && !loose && !hasSingle.current) {
+      debug('render printable only', printableNodes);
+      const children = React.Children.map(printableNodes, (child, key) => {
+        return React.cloneElement(child, { key });
+      });
+      createRender(<div>{children}</div>);
+    }
+    setTimeout(() => deleteRender(), 0);
+  });
+
+  useEffect(() => {
+    debug('render everything', isInPrintPreview, printableNodes.length, !loose);
+  });
+
   // hideAll - is being used to cover all of React Portals, popups and modals and etc.
   const hideAll = () => {
     document.body.classList.add(s.hiddenAll);
@@ -58,7 +84,7 @@ export default function PrintProvider (props) {
     );
     printableRegistry.current[key] = printableNodes.length;
 
-    if (isSingle && !hasSingle) {
+    if (isSingle && !hasSingle.current) {
       hideAll();
     } else if (isSingle) {
       console.warn(
@@ -91,32 +117,7 @@ export default function PrintProvider (props) {
       unhideAll();
     }
   };
-
-  useEffect(() => {
-    window.matchMedia('print').onchange = () => {
-      debug('toggle print mode', window.matchMedia('print').matches);
-      setIsInPrintPreview(window.matchMedia('print').matches);
-    };
-  });
-
-  useEffect(() => {
-    if (isInPrintPreview && printableNodes.length && !loose && !hasSingle) {
-      debug('render printable only', printableNodes);
-      const children = React.Children.map(printableNodes, (child, key) => {
-        return React.cloneElement(child, { key });
-      });
-      createRender(<div>{children}</div>);
-    }
-    setTimeout(() => deleteRender(), 0);
-  });
   
-  useEffect(() => {
-    debug('render everything', isInPrintPreview, printableNodes.length, !loose);
-  });
-
-  const loose = props.loose || props.invert;
-  const loose_ = loose ? s.loose : '';
-  const invert_ = props.invert ? s.invert : '';
   return (
     <PrintProviderContext.Provider unregPrintable={unregPrintable} regPrintable={regPrintable}>
       <div className={`${s.wrap} ${loose_} ${invert_} `}>

From dc5c164ab0646f049410a2b4c4db268340f1518a Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Sat, 23 Nov 2019 20:33:01 -0300
Subject: [PATCH 15/16] PrintProvider: update deps on useEffects

---
 src/PrintProvider.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index 56236c4..82a54db 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -42,7 +42,7 @@ export default function PrintProvider (props) {
       debug('toggle print mode', window.matchMedia('print').matches);
       setIsInPrintPreview(window.matchMedia('print').matches);
     };
-  });
+  }, []);
 
   useEffect(() => {
     if (isInPrintPreview && printableNodes.length && !loose && !hasSingle.current) {
@@ -57,7 +57,7 @@ export default function PrintProvider (props) {
 
   useEffect(() => {
     debug('render everything', isInPrintPreview, printableNodes.length, !loose);
-  });
+  }, [isInPrintPreview, printableNodes.length, loose]);
 
   // hideAll - is being used to cover all of React Portals, popups and modals and etc.
   const hideAll = () => {

From 21555d9763ddf654bce00c36e5f57dd23fdf6079 Mon Sep 17 00:00:00 2001
From: Vitao18 <victoronline9@gmail.com>
Date: Sat, 23 Nov 2019 20:49:40 -0300
Subject: [PATCH 16/16] PrintProvider: move back to Object.assign to avoid
 additional complexity

---
 src/PrintProvider.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/PrintProvider.jsx b/src/PrintProvider.jsx
index 82a54db..3c8ebc8 100644
--- a/src/PrintProvider.jsx
+++ b/src/PrintProvider.jsx
@@ -109,10 +109,9 @@ export default function PrintProvider (props) {
         printableRegistry.current[key]
       )
     );
-    printableRegistry.current = {
-      ...printableRegistry.current,
+    printableRegistry.current = Object.assign({}, printableRegistry.current, {
       [key]: undefined
-    };
+    });
     if (isSingle) {
       unhideAll();
     }