jsx-to-pdf

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