adding usePrint hook

craig1123 · craig1123 · commit 45043a7b6fab · 2021-09-15T10:31:23.000-07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,14 @@
+## v1.3.0 (2021-09-15)
+
+#### Features :moneybag:
+
+- [PR](https://github.com/craig1123/react-recipes/pull/55) Added usePrint hook, tests, and documenation
+
 ## v1.2.0 (2021-09-12)
 
 #### Features :moneybag:
 
-- [PR](https://github.com/craig1123/react-recipes/pull/54) Added useLocation hook. Tests + documenation as well
+- [PR](https://github.com/craig1123/react-recipes/pull/54) Added useLocation hook, tests, and documenation
 
 ## v1.1.0 (2020-11-25)
 
diff --git a/README.md b/README.md
@@ -44,13 +44,15 @@ yarn add react-recipes
 | 🍐 [`useIsClient`](./docs/useIsClient.md)                   | isClient                                                      | -                                                                                       |
 | 🥧 [`useKeyPress`](./docs/useKeyPress.md)                   | keyPressed                                                    | (targetKey)                                                                             |
 | 🍱 [`useLocalStorage`](./docs/useLocalStorage.md)           | [storedValue, setValue]                                       | (key, initialValue)                                                                     |
+| 📍 [`useLocation`](./docs/useLocation.md)                   | { push, replace, pathname, search }                           | -                                                                                       |
 | 🍋 [`useLockBodyScroll`](./docs/useLockBodyScroll.md)       | -                                                             | -                                                                                       |
 | 🍉 [`useMedia`](./docs/useMedia.md)                         | value                                                         | (queries, values, defaultValue)                                                         |
 | 🥭 [`useMultiKeyPress`](./docs/useMultiKeyPress.md)         | keysPressed                                                   | (targetKey)                                                                             |
 | 🔔 [`useNotification`](./docs/useNotification.md)           | fireNotify                                                    | (title, options)                                                                        |
 | 🥑 [`useOnClickOutside`](./docs/useOnClickOutside.md)       | -                                                             | (ref, callback)                                                                         |
 | 🥒 [`useOnlineStatus`](./docs/useOnlineStatus.md)           | onlineStatus                                                  | -                                                                                       |
 | 🍿 [`usePrevious`](./docs/usePrevious.md)                   | previous                                                      | (value)                                                                                 |
+| 🖨 [`usePrint`](./docs/usePrint.md)                          | { ref, handlePrint }                                          | (style = {})                                                                            |
 | 🍣 [`useScript`](./docs/useScript.md)                       | [loaded, error]                                               | (src)                                                                                   |
 | 🍖 [`useSpeechRecognition`](./docs/useSpeechRecognition.md) | { supported, listen, listening, stop }                        | ({ onEnd, onResult, onError })                                                          |
 | 🍗 [`useSpeechSynthesis`](./docs/useSpeechSynthesis.md)     | { supported, speak, speaking, cancel, voices, pause, resume } | ({ onEnd, onResult, onError, onBoundary, onPause, onResume })                           |
@@ -59,4 +61,3 @@ yarn add react-recipes
 | 🥖 [`useWindowScroll`](./docs/useWindowScroll.md)           | { x, y }                                                      | -                                                                                       |
 | 🥮 [`useWindowSize`](./docs/useWindowSize.md)               | { height, width }                                             | (initialWidth, initialHeight)                                                           |
 | 🥝 [`useWorker`](./docs/useWorker.md)                       | worker instance                                               | (scriptPath, workerOptions, attributes)                                                 |
-| :pushpin: [`useLocation`](./docs/useLocation.md)            | { push, replace, pathname, search }                           | -                                                                                       |
diff --git a/__tests__/useCopyClipboard.test.js b/__tests__/useCopyClipboard.test.js
@@ -1,15 +1,11 @@
-
 import React from 'react';
-import {
-  cleanup, fireEvent, render, act,
-} from '@testing-library/react';
+import { cleanup, fireEvent, render, act } from '@testing-library/react';
 import useClipboard from '../src/useCopyClipboard';
 
 afterEach(cleanup);
 
 // mock copying to clipboard
-jest.mock('../utils/copyToClipboard.js', () => jest.fn(text => !!text));
-
+jest.mock('../utils/copyToClipboard.js', () => jest.fn((text) => !!text));
 
 describe('useClipboard', () => {
   test('`isCopied` becomes false after `successDuration` time ellapses', () => {
diff --git a/__tests__/useEventListener.test.js b/__tests__/useEventListener.test.js
@@ -6,7 +6,6 @@ import '@testing-library/dom';
 
 import useEventListener from '../src/useEventListener';
 
-
 const mouseMoveEvent = { clientX: 100, clientY: 200 };
 let hackHandler = null;
 
diff --git a/__tests__/useFullScreen.test.js b/__tests__/useFullScreen.test.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-return-assign */
 import React, { createRef } from 'react';
 import { act, cleanup, renderHook } from '@testing-library/react-hooks';
 import { fireEvent, render } from '@testing-library/react';
diff --git a/__tests__/usePrint.test.js b/__tests__/usePrint.test.js
@@ -0,0 +1,11 @@
+import { renderHook } from '@testing-library/react-hooks';
+import usePrint from '../src/usePrint';
+
+describe('usePrint', () => {
+  it('mocks window.print', () => {
+    window.print = jest.fn();
+    const { result } = renderHook(() => usePrint());
+    result.current.handlePrint();
+    expect(window.print).toBeCalled();
+  });
+});
diff --git a/docs/useLocation.md b/docs/useLocation.md
@@ -1,4 +1,4 @@
-# :pushpin: `useLocation`
+# 📍 `useLocation`
 
 Read and manipulate window.location
 
diff --git a/docs/usePrint.md b/docs/usePrint.md
@@ -0,0 +1,35 @@
+# 🖨 `usePrint`
+
+Preview and Print any block of html
+
+## Arguments
+
+- `style: Object`: style to be passed to the preview
+
+## Returns
+
+```
+{
+  ref: Ref: Click outside of this element,
+  handlePrint: Function - will start the print preview process
+}
+```
+
+## Usage
+
+```jsx
+import { usePrint } from 'react-recipes';
+
+const App = () => {
+  const { ref, handlePrint } = usePrint();
+
+  return (
+    <div ref={ref}>
+      Hello World
+      <button onClick={handlePrint} type="button">
+        Print This Block
+      </button>
+    </div>
+  );
+};
+```
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-recipes",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A React Hooks utility library containing popular customized hooks",
   "author": "@craig1123",
   "sideEffects": false,
diff --git a/src/index.js b/src/index.js
@@ -14,13 +14,15 @@ export { default as useInterval } from './useInterval';
 export { default as useIsClient } from './useIsClient';
 export { default as useKeyPress } from './useKeyPress';
 export { default as useLocalStorage } from './useLocalStorage';
+export { default as useLocation } from './useLocation';
 export { default as useLockBodyScroll } from './useLockBodyScroll';
 export { default as useMedia } from './useMedia';
 export { default as useMultiKeyPress } from './useMultiKeyPress';
 export { default as useNotification } from './useNotification';
 export { default as useOnClickOutside } from './useOnClickOutside';
 export { default as useOnlineStatus } from './useOnlineStatus';
 export { default as usePrevious } from './usePrevious';
+export { default as usePrint } from './usePrint';
 export { default as useScript } from './useScript';
 export { default as useSpeechRecognition } from './useSpeechRecognition';
 export { default as useSpeechSynthesis } from './useSpeechSynthesis';
@@ -29,4 +31,3 @@ export { default as useWhyDidYouUpdate } from './useWhyDidYouUpdate';
 export { default as useWindowScroll } from './useWindowScroll';
 export { default as useWindowSize } from './useWindowSize';
 export { default as useWorker } from './useWorker';
-export { default as useLocation } from './useLocation';
diff --git a/src/usePrint.js b/src/usePrint.js
@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react';
+
+const styleToString = (style) => {
+  return Object.entries(style)
+    .map(([a, b]) => {
+      return [
+        a
+          .split(/(?=[A-Z])/)
+          .join('-')
+          .toLowerCase(),
+        b,
+      ].join(':');
+    })
+    .join(';');
+};
+
+const defaultStyle = {
+  position: 'absolute',
+  zIndex: 999999,
+  backgroundColor: 'white',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+};
+
+const usePrint = (style = {}) => {
+  const ref = useRef(null);
+
+  const handlePrint = () => {
+    window.print();
+  };
+
+  useEffect(() => {
+    let div;
+    const divStyle = styleToString({ ...defaultStyle, ...style });
+
+    const onbeforeprint = () => {
+      console.log('hi');
+      div = document.createElement('div');
+      div.style = divStyle;
+      const prevRef = ref.current.cloneNode(true);
+      div.appendChild(prevRef);
+      document.body.appendChild(div);
+    };
+
+    const onafterprint = () => {
+      div.parentNode.removeChild(div);
+    };
+
+    window.addEventListener('beforeprint', onbeforeprint);
+    window.addEventListener('afterprint', onafterprint);
+
+    return () => {
+      window.removeEventListener('beforeprint', onbeforeprint);
+      window.removeEventListener('afterprint', onafterprint);
+    };
+  }, [ref, style]);
+
+  return { ref, handlePrint };
+};
+
+export default usePrint;
+
+// Usage
+
+// const App = () => {
+//   const { ref, handlePrint } = usePrint();
+
+//   return (
+//     <div ref={ref}>
+//       Hello World
+//       <button onClick={handlePrint}>Print This Block</button>
+//     </div>
+//   );
+// };

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+/* eslint-disable no-return-assign */`
`1`	`2`	`import React, { createRef } from 'react';`
`2`	`3`	`import { act, cleanup, renderHook } from '@testing-library/react-hooks';`
`3`	`4`	`import { fireEvent, render } from '@testing-library/react';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# :pushpin: `useLocation`
	`1`	+# 📍 `useLocation`
`2`	`2`
`3`	`3`	`Read and manipulate window.location`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-recipes",`
`3`		`- "version": "1.2.0",`
	`3`	`+ "version": "1.3.0",`
`4`	`4`	`"description": "A React Hooks utility library containing popular customized hooks",`
`5`	`5`	`"author": "@craig1123",`
`6`	`6`	`"sideEffects": false,`