Package Exports

react-to-print

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-to-print) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ReactToPrint - Print React components in the browser

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

Demo

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