kunwarvsuryavanshi / reacttopdf

React to pdf genrates PDF for any react component.

ReactToPDF

So this helps one create a PDF file for any React component. There is already one npm pkg for acheiving this functionality, so why this one you ask?

1. Some of them were failing with newer version of react.
2. Wanted to add certain more feature that is being provided by jsPdf and html2canvas.

Installing

npm i @kunwarji/react-to-pdf

Usage

Creating reference for passing it down to ReactToPDF:-

<div ref={refVar}>
  Something inside the component being rendered. Bazinga!
</div>

Calling component:-

  <ReactToPDF element={refVar}>
    {(toPdf) => (
      <button type="button" onClick={toPdf}>
        Click me
      </button>
      )
    }
  </ReactToPDF>

Reference passed to an element prop.

Other props

• scale - The scale to use for rendering. (Optional - Defaults value is 1)
• cropX - Crops canvas x-coordinate. (Optional - Default value is 0)
• cropY - Crop canvas y-coordinate. (Optional - Default value is 0)
• printStart - Array of [x, y] coordinate from where one wants the element to appear from on canvas. (Default - [0, 0])
• fileName - Name of the pdf file when it is downloaded. (Default - PDF_FILE)
• format - Rarely needed, but the image used for printing whether it should be JPEG, PNG, WEBP.
• compression - compression of the generated JPEG, can have the values 'NONE', 'FAST', 'MEDIUM' and 'SLOW'
• backgroundColor - Canvas background color, if none is specified in DOM. Set null for transparent
• logging - Enable logging for debug purposes
• modifyFn - Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.
• imageTimeout - Timeout for loading an image (in milliseconds). Set to 0 to disable timeout.
• width - The width of the canvas.
• height - The height of the canvas.

Working

Basically it is using html2canvas (to take snap after traversing the DOM) and jsPDF (to generate pdf).

reacttopdf's Issues

Next.js: Module not found -> prop-types

Fist of all, thanks for your work!

I was trying out this package, but I'm having a hard time. I use Next 13.0.4. and I get the following message.

This can be easily fixed by running

npm install prop-types

But it would be better to have that installed as a dev-dependency when installing your package. Unfortunately I do not know, how to fix this myself otherwise I would create a PR...

I tested and confirmed this behaviour on Next 12.2.0. But on React 18.2.0 (by create-react-app) it works.

Ps. In ReactToPDF.jsx on line 46 seems to be a typo, see Link.

ReactToPDF.propTyppes = { -> ReactToPDF.propTypes = {

From where to import ReactToPDF like import ReactToPDF from "ReactTOPDF"