Fast Set Up ⚡️

Clone this repository ⬇️


Clone our dev-local repository and follow the instructions in the readMe to get started quickly.

dev-local view

Using dev-local

We recommed splitting your editor into two windows, one for the code and the other for the PDF viewing integration.

Manual Set Up 🛠️

1. Create directory

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

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

2. Install the dependencies

Get the react-print package locally

1npm 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:

1import { PageTop, PageBottom, PageBreak } from "@fileforge/react-print";
2import * as React from "react";
4export 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 );

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.

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

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.