Easy React PDF

Overview

The Easy React PDF is a library that simplifies the process of generating PDF files from JSON configurations. With this library, you can easily create complex PDF documents with various styles, layouts, and content. and make it easy for templating PDF files.

Installation

You can install the library using npm:

1npm install easy-react-pdf

Note

you need install react, react-pdf and react-dom in your project

1npm install react react-dom @react-pdf/renderer

Usage

Node js

Stream File

1import { createStreamPDF, IPDFPage } from "easy-react-pdf";
2
3async function main(template: IPDFPage) {
4  const stream = await createStreamPDF(template);
5  return stream.pipe(fs.createWriteStream("output.pdf"));
6}

Create File

1import { createFilePDF, IPDFPage } from "easy-react-pdf";
2
3async function main(template: IPDFPage) {
4  await createFilePDF(template, "path/to/file.pdf");
5}

React

1import { PDFViewer } from "@react-pdf/renderer";
2import { Document } from "easy-react-pdf";
3
4function Main(template: IPDFPage) {
5  return (
6    <PDFViewer>
7      <Document {...template} />
8    </PDFViewer>
9  );
10}

Example Template

1{
2  "contents": [
3    {
4      "type": "views",
5      "style": {
6        "width": "100%",
7        "height": "100%",
8        "alignItems": "center",
9        "justifyContent": "center",
10        "display": "flex"
11      },
12      "contents": [
13        {
14          "type": "text",
15          "text": "{{name}}",
16          "style": {
17            "fontSize": 30,
18            "fontWeight": "bold"
19          }
20        }
21      ]
22    }
23  ],
24  "document": {
25    "title": "Payment Schedules"
26  },
27  "pages": {
28    "size": "A4"
29  }
30}

API

Validations

1import { validateJsonPDF, validateObjectPDF } from "easy-react-pdf";
2
3const validateJson = validateJsonPDF(contents);
4
5const validateObject = validateObjectPDF(contents);

this function return a valid object or throw a error

Template

1import { replaceVariablesJson, replaceVariablesObject } from "easy-react-pdf";
2
3const variables = [
4  {
5    name: "name",
6    value: "John Doe",
7  },
8  {
9    name: "age",
10    value: 20,
11  },
12];
13
14const templateJson = replaceVariablesJson(contents, variables);
15
16const templateObject = replaceVariablesObject(contents, variables);