# react-to-print-advanced

> Print React components in the browser

Latest version **2.1.2** (published 2019-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-to-print-advanced
pnpm add react-to-print-advanced
yarn add react-to-print-advanced
bun add react-to-print-advanced
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2019-04-22 |
| First published | 2019-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 20.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | sauravexodus |
| Maintainers | souravchandra |
| Keywords | react, print, reactjs, react-to-print |

## Links

- npm: https://www.npmjs.com/package/react-to-print-advanced
- Repository: https://github.com/doctalk-india/react-to-print
- Homepage: https://github.com/doctalk-india/react-to-print#readme
- Issues: https://github.com/doctalk-india/react-to-print/issues
- npm.io page: https://npm.io/package/react-to-print-advanced

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.2 (latest) — 2019-04-22
- 2.1.1 — 2019-04-22

## README

<div align="center">
  <img src="https://user-images.githubusercontent.com/19170080/33672781-14f1b03e-da79-11e7-95fe-4ce15f170230.png" />
</div>

# ReactToPrint - Print React components in the browser

[![Build Status](https://travis-ci.org/gregnb/react-to-print-advanced.svg?branch=master)](https://travis-ci.org/gregnb/react-to-print-advanced)
[![NPM Downloads](https://img.shields.io/npm/dt/react-to-print-advanced.svg?style=flat)](https://npmcharts.com/compare/react-to-print-advanced?minimal=true)
[![dependencies Status](https://david-dm.org/gregnb/react-to-print-advanced/status.svg)](https://david-dm.org/gregnb/react-to-print-advanced)
[![npm version](https://badge.fury.io/js/react-to-print-advanced.svg)](https://badge.fury.io/js/react-to-print-advanced)

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-advanced --save-dev`

## Demo

[![Edit react-to-print-advanced](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/kmmw7l39y7)

## Example

### Calling from class components

```js
import React from 'react';
import ReactToPrint from 'react-to-print-advanced';

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](https://reactjs.org/docs/hooks-intro.html)

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

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

#### &lt;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 &lt;style> and &lt;link type="stylesheet" /> from <head> 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                                                                                                 |
|    **`pageStyle`**    | string   | Override default print window styling                                                                                               |
|    **`bodyClass`**    | string   | Optional class to pass to the print window body                                                                                     |
|    **`delay`**    | string   | Optional delay to pass                                                                                     |
## FAQ

**Why does `react-to-print-advanced` skip `<link rel="stylesheet" href="">` tags?**
`<link>`s with empty `href` attributes are [INVALID HTML](https://www.w3.org/TR/html50/document-metadata.html#attr-link-href). In addition, they can cause all sorts of [undesirable behavior](https://gtmetrix.com/avoid-empty-src-or-href.html). 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.

---
_Source: https://npm.io/package/react-to-print-advanced · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._