react-to-pdf

React to PDF

Easily create pdf documents from react components.

Install

$ npm install react-to-pdf

Examples

https://codesandbox.io/s/00z452xyrl

Usage

Using inner target ref

<ReactToPdf>
    {({toPdf, targetRef}) =>  (
        <div style={{width: 500, height: 500, background: 'red'}} onClick={toPdf} ref={targetRef}/>
    )}
</ReactToPdf>

Using outer target ref

const ref = React.createRef();

<div>
    <ReactToPdf targetRef={ref} filename="div-blue.pdf">
        {({toPdf}) => (
            <button onClick={toPdf}>Generate pdf</button>
        )}
    </ReactToPdf>
    <div style={{width: 500, height: 500, background: 'blue'}} ref={ref}/>
</div>

Advanced options

const ref = React.createRef();
const options = {
    orientation: 'landscape',
    unit: 'in',
    format: [4,2]
};
<div>
    <ReactToPdf targetRef={ref} filename="div-blue.pdf" options={options} x={.5} y={.5}>
        {({toPdf}) => (
            <button onClick={toPdf}>Generate pdf</button>
        )}
    </ReactToPdf>
    <div style={{width: 500, height: 500, background: 'blue'}} ref={ref}/>
</div>

Props

Prop name	Type	Default	Description
filename	string	'download.pdf'	Name of the pdf file
targetRef	string		Reference for the target component (use this or inner target reference)
x	number	0	X position in document
y	number	0	Y position in document
options	object	{}	options for the jsPdf document - view more details[https://rawgit.com/MrRio/jsPDF/master/docs/]