React-to-pdf-ts NPM

react-to-pdf-ts

This package provides a convenient and efficient way to convert React components into PDF files, leveraging the capabilities of Puppeteer in a TypeScript environment. It is designed with a focus on ease of use, flexibility, and robustness, making it an ideal solution for projects requiring PDF generation from React components.

Features

React to PDF Conversion: Seamlessly convert React components into high-quality PDF files.
Buffer Support: No need to write to disk; you can also get the PDF as a buffer.
Puppeteer Integration: Utilizes Puppeteer for reliable and accurate rendering.
TypeScript Support: Full TypeScript support ensures type safety and developer-friendly usage.
Customizable Options: Offers a range of customization options for Puppeteer, giving you control over the PDF generation process.

Prerequisites

Before using react-to-pdf-ts, ensure the following is set up in your Node.js TypeScript project:

Node.js and npm (or yarn) installed.
A project set up with TypeScript.
React and React DOM: Install these as they are peer dependencies of this package.
```
npm install react react-dom
```

Installation

Install the package using npm:

npm install react-to-pdf-ts

Usage

Before you begin, make sure your TypeScript configuration (tsconfig.json) supports JSX. Set "jsx": "react" in your compiler options.

Additionally, when working with JSX in TypeScript, use the .tsx extension for your files. TypeScript treats .tsx files differently due to the JSX syntax.

Here's a quick example to get you started with react-to-pdf-ts in a TypeScript project:

Import the package:

import {convertToPdf} from 'react-to-pdf-ts';
import * as React from 'react';

Create a React Component:

You can either define a new React component or import an existing one. Here's an example of a simple component:

const MyComponent: React.FC = () => <div>Hello PDF World!</div>;

Convert to PDF:

Call convertToPdf with your component and specify the output path for the PDF file:

convertToPdf(<MyComponent / >, {outputPath: './output.pdf'})
    .then((buffer: Buffer) => console.log('PDF buffer:', buffer))
    .catch(error => console.error('Error creating PDF:', error));

Ensure that your TypeScript project is properly set up to compile JSX.

API

`convertToPdf(component: React.ReactElement, options: ConvertToPdfOptions): Promise<Buffer>`

component: React component you wish to convert into a PDF.
options: Configuration options for PDF generation.
- outputPath: (optional) File path to save the generated PDF.
- puppeteerOptions (optional): Custom options for Puppeteer.