Setup

​

1. Create directory

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

mkdir react-print-starter
cd react-print-starter
npm init -y

​

2. Install the dependencies

Get the react-print package locally

npm install @onedoc/react-print

​

3. Create your first PDF Component

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

import { PageTop, PageBottom, PageBreak } from "@onedoc/react-print";
import * as React from "react";

export const Document = ({ props }) => {
  return (
    <div>
      <PageTop>
        <span>Hello #1</span>
      </PageTop>
      <div>Hello #2</div>
      <PageBottom>
        <div className="text-gray-400 text-sm">Hello #3</div>
      </PageBottom>
      <PageBreak />
      <span>Hello #4, but on a new page ! </span>
    </div>
  );
};

​

4. Compile your document to HTML

import { compile } from "@onedoc/react-print";
import { Document } from "./document";

const html = await compile(<Document />);

console.log(html);

​

5. Generate your document with Onedoc

It’s now time to generate your PDF from your component. We recommend using Onedoc as react-print has beem build especially to work witht his software. However, feel free to use any integrations that suits you the best.

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.