jsx-to-pdf

A Simple Utility to render React JSX to PDF

Getting Started

• Installation
• Basic Implementation
• Hook Implementation
• Output
• Contribution
• Questions

Installation

$ npm i jsx-to-pdf

Basic Implementation

import { JsxToPdf } from "jsx-to-pdf";

function App() {
  return (
    <JsxToPdf>
        {({ save, jsxRef, error, errorText }) => {
          return (
            <div className="App" ref={jsxRef}>
              <button style={{ height: 50, margin: 20, backgroundColor: '#61dafb' }} onClick={save}>Download PDF for this Page</button>
            </div>
          )
        }}
    </JsxToPdf>
  )
}

Hook Implementation

import { useJsxToPdf } from "jsx-to-pdf";

function App() {
  const { jsxRef, convertToPdf } = useJsxToPdf()
  return (
    <div className="App" ref={jsxRef}>
      <button style={{ height: 50, margin: 20, backgroundColor: '#61dafb' }} onClick={save}>Download PDF for this Page</button>
    </div>
  )
}

Input

| Name | Type | Default | Description | | :------------ |---------------:| :---------------| :-----| | name | String | jsxToPdf | Name of the PDF to be saved | | scale | Number | 1 | Scale of the HTMLNodeElement element | | x | Number | 0 | Offset x of the PDF | | y | Number | 0 | Offset y of the PDF | | width | Number | JSPDF document width | Width of the HTMLNodeElement to be set in PDF | | height | Number | JSPDF document height | Height of the HTMLNodeElement to be set in PDF | | {...rest} | Object | {} | JSPDF options |

Output

Render Props

| Name | Type | Default | Description | | :------------ |---------------:| :---------------| :-----| | save | Function | () => {} | Trigger PDF Submit | | jsxRef | ref | undefined | Reference to the HTMLNodeElement | | loading | Boolean | false | Loader for PDF save | | error | Boolean | false | Error | | errorText | String | () => {} | Error Text |

Hooks

| Name | Type | Default | Description | | :------------ |---------------:| :---------------| :-----| | convertToPDF | Function | () => {} | Trigger PDF Submit | | jsxRef | ref | undefined | Reference to the HTMLNodeElement | | loading | Boolean | false | Loader for PDF save | | error | Boolean | false | Error | | errorText | String | () => {} | Error Text |

Contribution

• @pritishvaidya The main author.

Questions

Feel free to contact me or create an issue