title: Export html area as image with html2canvas
body: <p>I am having a React app. I need to be able to export component as a png/jpg. I am trying to do that with html2canvas library.</p>
  
  <p>I tried with this naive approach</p>
  
  <pre><code>const printDocument = () =&gt; {
    html2canvas(document.querySelector("#capture")).then(canvas =&gt; {
      document.body.appendChild(canvas);
    });
  };
  
  export default function App() {
    return (
      &lt;div className="App"&gt;
        &lt;div id="capture" style={{ padding: 10, background: "#f5da55" }}&gt;
          &lt;h4 style={{ color: "#000" }}&gt;Hello world!&lt;/h4&gt;
        &lt;/div&gt;
  
        &lt;button onClick={printDocument}&gt;Print&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>But I am getting an error:</p>
  
  <pre><code>TypeError
  (0 , _html2canvas.html2canvas) is not a function
  printDocument
  /src/App.js:12:14
     9 | // };
    10 | 
    11 | const printDocument = () =&gt; {
  &gt; 12 |   html2canvas(document.querySelector("#capture")).then(canvas =&gt; {
       |              ^
    13 |     document.body.appendChild(canvas);
    14 |   });
    15 | };
  </code></pre>
  
  <p>How can I achieve this in ReactJs? </p>