Merge pull request #249 from gregnb/may-2020-updates

May 2020 updates
MatthewHerbst · May 16, 2020 · 90e0dd9 · 90e0dd9
2 parents 214c530 + 21fe766
commit 90e0dd9
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 392 deletions.
diff --git a/README.md b/README.md
@@ -39,10 +39,10 @@ The component accepts the following props:
 
 |         Name          | Type     | Description                                                                                                                         |
 | :-------------------: | :------- | :---------------------------------------------------------------------------------------------------------------------------------- |
-|     **`trigger?`**     | `function` | A function that returns a React Component or HTML element                                                                           |
+|     **`trigger?`**     | `function` | A function that returns a React Component or Element. Note: under the hood, we inject a custom `onClick` prop into the returned Component/Element. As such, do not provide an `onClick` prop to the root node returned by `trigger`, as it will be overwritten.                                                                           |
 |     **`content`**     | `function` | A function that returns a component reference value. The content of this reference value is then used for print                     |
 |   **`copyStyles?`**    | `boolean`  | Copy all `<style>` and `<link type="stylesheet" />` tags from `<head>` inside the parent window into the print window. (default: `true`) |
-|     **`documentTitle?`**     | `string` | Optional default title for document if saved as file
+|     **`documentTitle?`**     | `string` | Set the title for printing when saving as a file
 | **`onBeforeGetContent?`** | `function` | Callback function that triggers before the library gathers the page's content. Either returns void or a Promise. This can be used to change the content on the page before printing.
 |  **`onBeforePrint?`**  | `function` | Callback function that triggers before print. Either returns void or a Promise. Note: this function is run immediately prior to printing, but after the page's content has been gathered. To modify content before printing, use `onBeforeGetContent` instead.                                                                                     |
 |  **`onAfterPrint?`**   | `function` | Callback function that triggers after print                                                                                       |
@@ -52,14 +52,15 @@ The component accepts the following props:
 |    **`bodyClass`**    | `string?`   | Class to pass to the print window body                                                                                     |
 |    **`suppressErrors`**    | `boolean?`   | When passed, prevents `console` logging of errors
 
-### PrintContextConsumer
+### `PrintContextConsumer`
 
-If you need extra control over printing and don't want to specify `trigger` directly, `PrintContextConsumer` allows you to gain direct access to the `handlePrint` method which triggers the print action. Requires React 16.3.0 and higher.
+If you need extra control over printing and don't want to specify `trigger` directly, `PrintContextConsumer` allows you to gain direct access to the `handlePrint` method which triggers the print action. Requires React ^16.3.0.
 
-### [useReactToPrint]
-For functional components, use the `useReactToPrint` hook, which accepts an object with the same configuration props as `<ReactToPrint />` returns a `handlePrint` function which when called will trigger the print action. Requires React 16.8 and higher.
-
-## Example
+### `useReactToPrint`
+
+For functional components, use the `useReactToPrint` hook, which accepts an object with the same configuration props as `<ReactToPrint />` and returns a `handlePrint` function which when called will trigger the print action. Requires React ^16.8.0.
+
+## Examples
 
 ### Calling from class components
 
@@ -93,7 +94,11 @@ class Example extends React.Component {
     return (
       <div>
         <ReactToPrint
-          trigger={() => <a href="#">Print this out!</a>}
+          trigger={() => {
+            // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
+            // to the root node of the returned component as it will be overwritten.
+            return <a href="#">Print this out!</a>;
+          }}
           content={() => this.componentRef}
         />
         <ComponentToPrint ref={el => (this.componentRef = el)} />
@@ -103,7 +108,8 @@ class Example extends React.Component {
 }
 ```
 
-### Calling from class components with PrintContextConsumer
+### Calling from class components with `PrintContextConsumer`
+
 ```js
 import React from 'react';
 import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
@@ -133,14 +139,12 @@ class Example extends React.Component {
   render() {
     return (
       <div>
-        <ReactToPrint
-          content={() => this.componentRef}
-        >
-        	<PrintContextConsumer>
-				{({ handlePrint }) => (
-					<button onClick={handlePrint}>Print this out!</button>
-				)}
-			</PrintContextConsumer>
+        <ReactToPrint content={() => this.componentRef}>
+          <PrintContextConsumer>
+            {({ handlePrint }) => (
+                <button onClick={handlePrint}>Print this out!</button>
+            )}
+          </PrintContextConsumer>
         </ReactToPrint>
         <ComponentToPrint ref={el => (this.componentRef = el)} />
       </div>
@@ -149,8 +153,7 @@ class Example extends React.Component {
 }
 ```
 
-
-### Calling from functional components with `useReactToPrint` [hook](https://reactjs.org/docs/hooks-intro.html)
+### Calling from functional components
 
 ```js
 import React, { useRef } from 'react';
@@ -190,8 +193,8 @@ const Example = () => {
     </div>
   );
 };
-
 ```
+
 ### Calling from functional components with [useReactToPrint](https://reactjs.org/docs/hooks-intro.html)
 
 ```js
@@ -224,7 +227,7 @@ const Example = () => {
   const handlePrint = useReactToPrint({
     content: () => componentRef.current,
   });
-  
+
   return (
     <div>
       <ComponentToPrint ref={componentRef} />