Merge pull request #344 from gregnb/use-appendChild

Use append child

examples/ClassComponentText/index.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+
+import ReactToPrint from "../../src/index";
+
+type Props = Record<string, unknown>;
+type State = {
+  isLoading: boolean;
+  text: string;
+};
+
+class TextComponent extends React.PureComponent {
+  render() {
+    return 'This is bare text';
+  }
+}
+
+export class ClassComponentText extends React.PureComponent<Props, State> {
+  componentRef: TextComponent | null = null;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isLoading: false,
+      text: "old boring text",
+    };
+  }
+
+  setComponentRef = (ref: TextComponent) => {
+    this.componentRef = ref;
+  }
+
+  reactToPrintContent = () => {
+    return this.componentRef;
+  }
+
+  reactToPrintTrigger = () => {
+    // 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.
+
+    // Bad: the `onClick` here will be overwritten by `react-to-print`
+    // return <button onClick={() => alert('This will not work')}>Print this out!</button>;
+
+    // Good
+    return <button>Print pure text using a Class Component</button>;
+  }
+
+  render() {
+    return (
+      <div>
+        <ReactToPrint
+          content={this.reactToPrintContent}
+          documentTitle="AwesomeFileName"
+          removeAfterPrint
+          trigger={this.reactToPrintTrigger}
+        />
+        {this.state.isLoading && <p className="indicator">onBeforeGetContent: Loading...</p>}
+        <TextComponent ref={this.setComponentRef} />
+      </div>
+    );
+  }
+}

examples/index.tsx

@@ -5,6 +5,7 @@ import { ClassComponent } from "./ClassComponent";
 import { ClassComponentContextConsumer } from "./ClassComponentContextConsumer";
 import { FunctionalComponent } from "./FunctionalComponent";
 import { FunctionalComponentWithHook } from "./FunctionalComponentWithHook";
+import { ClassComponentText } from "./ClassComponentText";
 import "./relativecss/test.css";
 
 type Props = Record<string, unknown>;
@@ -21,6 +22,7 @@ class Example extends React.Component<Props, State> {
         <ClassComponentContextConsumer />
         <FunctionalComponent />
         <FunctionalComponentWithHook />
+        <ClassComponentText />
       </>
     );
   }