react-pdf-export

About

It allows you to either download or print a pdf file with your own content.

Example

Example code in stackblitz

Installation

// with npm

npm i @garage-panda/react-pdf-export

// with yarn

yarn add @garage-panda/react-pdf-export

Import the package

import { PdfExport, useGeneratePdf } from "@garage-panda/react-pdf-export";

Retrieve the component and the useEffect

const { generatePdf, containerRef } = useGeneratePdf();

That's it!

Usage

import { PdfExport, useGeneratePdf } from '@garage-panda/react-pdf-export';

const App() {
    const { generatePdf, containerRef } = useGeneratePdf();

    return (
      <React.Fragment>
        <PdfExport containerRef={containerRef}>
          <h1>This is the content of the PDF in here</h1>
          <div>
            <p>Yes, you can put any child</p>
            <div>Because it's awesome!</div>
          </div>
        </PdfExport>

        <button onClick={generatePdf}>Generate PDF</button>
      </React.Fragment>
    );
}

export default App;

Available optional props

Prop	Type	Default	Description	Optional
className	string	none	A custom class passed down to the iframe container	yes
showInDom	boolean	true	Show the preview of the PDF in the DOM	yes
lazyLoad	boolean	false	In the lazy load mode the content of the PDF is added to the DOM when you call generatePdf and is cleared afterwards. In non-lazy load the content is added to the DOM when the page is rendered	yes
options	HeadOptions	{ styles: [], scripts: [], includeParentStyles: true }	Styles and scripts loaded only in the iframe	yes

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Support

If you like what you see, feel free to support us!

License

MIT