print-react 🖨️
Lightweight component wrapper to print the wrapped component when desired
Highlights
- print individual react component(s)
- lightweight
- fully written in TypeScript
Install
npm install --save print-react
Or if you use Yarn:
yarn add print-react
Usage
Detailed documentation coming soon. An example usage would be:
import { Print } from "print-react";
export const MyExampleParentComponent = () => {
const ref = useRef<{ openPrintDialog: () => Promise<void> }>();
// use the following line only if you need to 'react' to the dialog state change:
const [printDialogOpen, setPrintDialogOpen] = useState(false);
return (
<div>
<Print
ref={ref}
printWidth={420}
marginTop={48}
marginLeft={64}
onOpenPrintDialog={() => {
setPrintDialogOpen(true);
}}
onClosePrintDialog={() => {
setPrintDialogOpen(false);
}}
>
<MyComponentIWantToPrint />
</Print>
<button
onClick={async () => {
await ref.current.openPrintDialog();
}}
>
Click to print!
</button>
</div>
);
};