react-to-print's Introduction

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
`closeAfterPrint`	boolean	Close the print window after action
`bodyClass`	string	Optional class to pass to the print window body

Recommend Projects