React: Print Specific Section of the page with - ReactToPrint

 

Want to know how can you easily print specific section of your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only.

Step 1: Add the ReactToPrint in your project  

npm install --save react-to-print

Step2: Add the following code in your component

  import React, { useRef } from 'react';
  import ReactToPrint from 'react-to-print';
  const Example = () => {   
      const componentRef = useRef();
      return (   
          <div>
              <ReactToPrint
                  trigger={() => <button>Print this out!</button>}
                  content={() => componentRef}
              />
              <table ref={componentRef}>
                  <tr>
                      <td>Printable data goes here</td>
                  </tr>
              </table>
          <div>
    );
  };