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.
npm install react-to-print --save-dev
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>
);
}
}
The component accepts the following props:
Name | Type | Description |
---|---|---|
trigger |
function | A callback function that returns a React Component or HTML element |
content |
function | A callback 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) |