Fast Set Up ⚡️

Clone this repository ⬇️

Manual Set Up 🛠️

1. Create directory

Create a new folder called react-print-starter and initialize a new npm project

1
mkdir react-print-starter
2
cd react-print-starter
3
npm init -y

2. Install the dependencies

Get the react-print package locally

1
npm install @fileforge/react-print

3. Create your first PDF Component

Create a new documents folder, then create a new file inside called index.jsx and copy the following code:

1
import { PageTop, PageBottom, PageBreak } from "@fileforge/react-print";
2
import * as React from "react";
3
4
export const Document = ({ props }) => {
5
  return (
6
    <div>
7
      <PageTop>
8
        <span>Hello #1</span>
9
      </PageTop>
10
      <div>Hello #2</div>
11
      <PageBottom>
12
        <div className="text-gray-400 text-sm">Hello #3</div>
13
      </PageBottom>
14
      <PageBreak />
15
      <span>Hello #4, but on a new page ! </span>
16
    </div>
17
  );
18
};

4. Compile your document to HTML

Back in your parent folder, create a main.jsx file that imports your document an renders it using the compile function.

1
import { compile } from "@fileforge/react-print";
2
import { Document } from "./document";
3
4
const html = await compile(<Document />);
5
6
console.log(html);

5. Generate your document with FileForge

We recommend generating your PDF using the FileForge API, as it is specifically designed to integrate seamlessly with react-print. However, you are welcome to choose any external renderer that better meets your needs. How to generate my PDF from my react-print component.

6. Next steps

Try to modify your PDF by using our different pre-built components.