jsx-to-pdf's Introduction

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