Print React components in the browser

ReactToPrint - Print React components in the browser

Print React components in the browser. Supports Chrome, Safari, Firefox and EDGE

So you've created a React component but would love to give end users the ability to print out the contents of that component. This package aims to solve that by popping up a new print window with CSS styles copied over as well.

Install

npm install react-to-print --save-dev

Usage

import React from "react";
import ReactToPrint from "react-to-print";

class ComponentToPrint extends React.Component {
  render() {
    return (
      <table>
        <thead>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </thead>
        <tbody>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

class Example extends React.Component {
  render() {
    return (
      <div>
        <ReactToPrint
          trigger={() => <a href="#">Print this out!</a>}
          content={() => this.componentRef}
        />
        <ComponentToPrint ref={el => (this.componentRef = el)} />
      </div>
    );
  }
}

API

<ReactToPrint />

The component accepts the following props:

Name	Type	Description
trigger	function	A function that returns a React Component or HTML element
content	function	A function that returns a component reference value. The content of this reference value is then used for print
copyStyles	boolean	Copies all <style> and <link type="stylesheet" /> from inside the parent window into the print window. (default: true)
onBeforePrint	function	A callback function that triggers before print
onAfterPrint	function	A callback function that triggers after print

GitHub