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

The README file is missing

Changelog

2.14.14 (September 22nd, 2023)

• FIX 635: Ensure proper handling of <link> nodes that have multiple value rel attributes set such as rel="prefetch stylesheet", and, ensure proper handling of <link> nodes using rel="preload" + as="style"
• DOCS 637: Added README section regarding having proper a media attribute set on <link> nodes
• DOCS 633 Added README section regarding proper printing of scrolled containers. Thanks siaikin!
• DEPENDENCIES: Upgrade all devDependencies to their latest versions