{"_id":"@andrewsantarin/react-to-print","_rev":"1-a0617e72fab67510640352e1bba5fb0d","name":"@andrewsantarin/react-to-print","dist-tags":{"latest":"2.0.0-alpha.7"},"versions":{"2.0.0-alpha.7":{"name":"@andrewsantarin/react-to-print","version":"2.0.0-alpha.7","description":"Print React components in the browser","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"rollup -c","build:ts":"tsc -p .","lint":"eslint . --color","webpack":"webpack --progress","webpack-dev-server":"webpack-dev-server --colors --progress"},"repository":{"type":"git","url":"git+https://github.com/gregnb/react-to-print.git"},"keywords":["react","print","reactjs","react-to-print"],"author":{"name":"gregnb","email":"gregnb@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/gregnb/react-to-print/issues"},"homepage":"https://github.com/gregnb/react-to-print#readme","peerDependencies":{"react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"dependencies":{"prop-types":"^15.6.2"},"devDependencies":{"@babel/cli":"^7.2.0","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.1","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/preset-env":"^7.2.0","@babel/preset-react":"^7.0.0","@types/prop-types":"^15.5.8","@types/react":"^16.7.18","@types/react-dom":"^16.0.11","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","babel-plugin-transform-react-remove-prop-types":"^0.4.21","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","react":"^16.6.3","react-dom":"^16.6.3","rollup":"^0.52.0","rollup-plugin-babel":"^4.1.0","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-copy":"~0.2.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-uglify":"^2.0.1","typescript":"^3.0.0","webpack":"^3.9.1","webpack-dev-server":"^2.9.5"},"gitHead":"3febda9a20fbf527f61f7c55a03c6ac6a6225741","_id":"@andrewsantarin/react-to-print@2.0.0-alpha.7","_nodeVersion":"10.7.0","_npmVersion":"6.6.0","dist":{"integrity":"sha512-4rLiob1zcWiXoky5NrzJ17yzha6XKUZvgecqor1sALe/GlS+aV6x0xovxMF8nSfJZCq4rnppsBw5ebhdSxt3eQ==","shasum":"5291d2e677beb398cbabe931b3ca8d23c2ea4ef5","tarball":"https://registry.npmjs.org/@andrewsantarin/react-to-print/-/react-to-print-2.0.0-alpha.7.tgz","fileCount":6,"unpackedSize":26168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJccpHMCRA9TVsSAnZWagAAcWEQAKTSElhW9a17LVoBt6Pu\n3p8PLysObJmbT6nA6xIWaExKhy3Wd6/ckIX6wxgNcx+00hNr93Zf3fc82OyK\n171uy1jxXXKypf3U98y8HElcpZG64GzxLGHXXaQ+C6JgDEfBJzcs3YtRhc1o\nyNJkdb/r34TOdyKSKL0PM6jDF294VssrAF52K9nlEMKHarK834BlRpxrZKF3\nDdwrY6H0YA8X6PawpU5N3tzzLYX3eqeFO5eBhfHvzl8UTkDbwIyt6R9oeK79\n2Rk4UerOoPdviIQsqdMvLE4Bs87smtCixftjRPavd3Ip0AOKccjRqXTsv+TD\nmeq96Zy8tistIEMsjPDgDQnOUJS9hInGkHgArapch8VSIfZX8tiyBv5yjBNf\n2uQfTrdgRtygMlRBVQOoAhPlsTlk/q94rmWMTXOON8FCwqkomZBdqE5zoK0a\nhG7KNLn5RMgb1w0JZaxmJYdg2ArbGMJP+SWf4tNXQyxgKJ6TZMIVhQhknrSY\nwKJo6kNbu+jM7kLMkE6AWHjN9zyT9UhyR3nmeL5AHr4N40QDBmPGLadfR7yx\nvXdCQsJvCaF/WsQlHhaHjaAzCMzxCzi8gKBQPKbzDoM4G8APnPOeTuxbI9Sf\nfx9luOBEucsFyooKkPfFnOCbgGGBcbxCMbI8Csw1FFZrId+Pj4g2URLtOTzi\ndn8M\r\n=FJYU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZa12s2euuXcBSWtYFyRNJQMIEhsJXkifRNkN/snO7xAiARIDTXPBf5tQLxcxgG+T9u5VSAN7zpCeKv/cy97AAJFQ=="}]},"maintainers":[{"name":"andrewsantarin","email":"andrew.santarin@gmail.com"}],"_npmUser":{"name":"andrewsantarin","email":"andrew.santarin@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-to-print_2.0.0-alpha.7_1551012299906_0.9737040527516312"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-24T12:44:59.719Z","2.0.0-alpha.7":"2019-02-24T12:45:00.074Z","modified":"2022-04-04T14:01:53.893Z"},"maintainers":[{"name":"andrewsantarin","email":"andrew.santarin@gmail.com"}],"description":"Print React components in the browser","homepage":"https://github.com/gregnb/react-to-print#readme","keywords":["react","print","reactjs","react-to-print"],"repository":{"type":"git","url":"git+https://github.com/gregnb/react-to-print.git"},"author":{"name":"gregnb","email":"gregnb@gmail.com"},"bugs":{"url":"https://github.com/gregnb/react-to-print/issues"},"license":"MIT","readme":"
\n \n
\n\n# ReactToPrint - Print React components in the browser\n\n[![Build Status](https://travis-ci.org/gregnb/react-to-print.svg?branch=master)](https://travis-ci.org/gregnb/react-to-print)\n[![dependencies Status](https://david-dm.org/gregnb/react-to-print/status.svg)](https://david-dm.org/gregnb/react-to-print)\n[![npm version](https://badge.fury.io/js/react-to-print.svg)](https://badge.fury.io/js/react-to-print)\n\nSo 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.\n\n## Install\n\n`npm install react-to-print --save-dev`\n\n## Demo\n\n[![Edit react-to-print](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/kmmw7l39y7)\n\n## Example\n\n### Calling from class components\n\n```js\nimport React from 'react';\nimport ReactToPrint from 'react-to-print';\n\nclass ComponentToPrint extends React.Component {\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
column 1column 2column 3
data 1data 2data 3
data 1data 2data 3
data 1data 2data 3
\n );\n }\n}\n\nclass Example extends React.Component {\n render() {\n return (\n
\n Print this out!}\n content={() => this.componentRef}\n />\n (this.componentRef = el)} />\n
\n );\n }\n}\n```\n\n### Calling from functional components with [hooks](https://reactjs.org/docs/hooks-intro.html)\n\n```js\nimport React, { useRef } from 'react';\nimport ReactToPrint from 'react-to-print';\n\nclass ComponentToPrint extends React.Component {\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
column 1column 2column 3
data 1data 2data 3
data 1data 2data 3
data 1data 2data 3
\n );\n }\n}\n\nconst Example = () => {\n const componentRef = useRef();\n return (\n
\n }\n content={() => componentRef.current}\n />\n \n
\n );\n};\n```\n\n## API\n\n#### <ReactToPrint />\n\nThe component accepts the following props:\n\n| Name | Type | Description |\n| :-------------------: | :------- | :---------------------------------------------------------------------------------------------------------------------------------- |\n| **`trigger`** | function | A function that returns a React Component or HTML element |\n| **`content`** | function | A function that returns a component reference value. The content of this reference value is then used for print |\n| **`copyStyles`** | boolean | Copies all <style> and <link type=\"stylesheet\" /> from inside the parent window into the print window. (default: true) |\n| **`onBeforePrint`** | function | A callback function that triggers before print |\n| **`onAfterPrint`** | function | A callback function that triggers after print |\n| **`closeAfterPrint`** | boolean | Close the print window after action |\n| **`pageStyle`** | string | Override default print window styling |\n| **`bodyClass`** | string | Optional class to pass to the print window body |\n\n## FAQ\n\n**Why does `react-to-print` skip `` tags?**\n``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 `` will attempt to load the current page. Some even attempt to load the current page's parent directory.\n","readmeFilename":"README.md"}