react-to-print

What is react-to-print?

The react-to-print npm package allows you to easily print React components. It provides a simple way to trigger the print functionality for specific parts of your application, making it useful for generating printable content from your React components.

What are react-to-print's main functionalities?

Basic Printing

This feature allows you to print a specific React component. The `ReactToPrint` component takes a `trigger` prop, which is a function that returns a React element to trigger the print action, and a `content` prop, which is a function that returns the component to be printed.

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

class ComponentToPrint extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>This is a printable component.</p>
      </div>
    );
  }
}

const MyComponent = () => {
  const componentRef = useRef();
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};

export default MyComponent;

Custom Styling for Print

This feature allows you to apply custom styles to the printed content. The `pageStyle` prop can be used to define CSS styles that will be applied when printing.

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

class ComponentToPrint extends React.Component {
  render() {
    return (
      <div>
        <h1 style={{ color: 'red' }}>Hello World!</h1>
        <p>This is a printable component with custom styles.</p>
      </div>
    );
  }
}

const MyComponent = () => {
  const componentRef = useRef();
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
        pageStyle="@page { size: auto;  margin: 20mm; } @media print { body { -webkit-print-color-adjust: exact; } }"
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};

export default MyComponent;

Handling Print Callbacks

This feature allows you to handle callbacks before and after the print action. The `onBeforePrint` and `onAfterPrint` props can be used to execute functions at these stages.

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

class ComponentToPrint extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>This is a printable component.</p>
      </div>
    );
  }
}

const MyComponent = () => {
  const componentRef = useRef();
  const handleBeforePrint = () => {
    console.log('Before print');
  };
  const handleAfterPrint = () => {
    console.log('After print');
  };
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
        onBeforePrint={handleBeforePrint}
        onAfterPrint={handleAfterPrint}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};

export default MyComponent;

Other packages similar to react-to-print

print-js

Print.js is a library that provides a simple way to print content from the web. It supports printing HTML elements, PDFs, images, and JSON data. Compared to react-to-print, Print.js is more versatile in terms of the types of content it can print, but it is not specifically designed for React components.

react-print

React-print is another library for printing React components. It offers similar functionality to react-to-print but is less popular and has fewer features. It is a simpler alternative for basic printing needs.

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

Example

Calling from class components

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>
    );
  }
}

Calling from functional components with hooks

import React, { useRef } 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>
    );
  }
}

const Example = () => {
  const componentRef = useRef();
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </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	Optional callback function that triggers before print. Either returns void or a Promise. If the function returns a Promise the content will be printed when the Promise is resolved. Users are responsible for catching the Promise rejecting.
onAfterPrint	function	Optional callback function that triggers after print
removeAfterPrint	boolean	Remove the print iframe after action. Defaults to false.
pageStyle	string	Override default print window styling
bodyClass	string	Optional class to pass to the print window body

FAQ

Why does react-to-print skip <link rel="stylesheet" href=""> tags? <link>s with empty href attributes are INVALID HTML. In addition, they can cause all sorts of undesirable behavior. For example, many browsers - including modern ones, when presented with <link href=""> will attempt to load the current page. Some even attempt to load the current page's parent directory.

Changelog

2.3.1 (August 6th, 2019)

• FIX 154: TSLint was not working properly for the project. A configuration was added, and linting errors were fixed. While fixing linting errors, a bug was discovered whereby if a stylesheet was found that did not have tag type STYLE it was possible that react-to-print would not include all stylesheets from the page into the print window

• FIX: 154 (meant to be a different PR, was included by mistake in 154): When passing removeAfterPrint some users were getting the error TypeError: Object doesn't support property or method 'remove'. This was due to using an incorrect way to remove the iframe