React Templates

Pogodoc allows you to leverage the power and flexibility of React to create dynamic and complex document templates. This guide will walk you through the process of setting up a React project to be used as a Pogodoc template.

Project Setup

While you can use any React setup (like Create React App, Next.js in static export mode, or a custom webpack configuration), we recommend using Vite for a fast and straightforward setup.

To create a new React project with TypeScript using Vite, run the following command in your terminal:

npm create vite@latest my-react-template -- --template react-ts

This will create a new directory named my-react-template with a basic React and TypeScript project.

Accessing Template Data

When Pogodoc renders your template, it injects the JSON data you provide into the window object under the __POGODOC_DATA__ property. To access this data in a type-safe way, we recommend creating a helper file.

Create a file, for example src/config.ts, with the following content:

declare global {
  interface Window {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    __POGODOC_DATA__: any;
  }
}

export const pogodocData = window.__POGODOC_DATA__;

This code declares a global __POGODOC_DATA__ property on the window object and exports the data for easy use throughout your application.

Now you can import and use this data in any of your components.

Example Usage

Here's an example of a simple React component that displays a name from the injected data:

src/App.tsx

import { pogodocData } from "./config";

function App() {
  return (
    <div>
      <h1>Hello, {pogodocData.name}!</h1>
      {/* Rest of your template */}
    </div>
  );
}

export default App;

Building Your Template

After you have finished creating your template, you need to build it to generate the static HTML, CSS, and JavaScript files.

If you used Vite, you can run the build command:

npm run build

This will create a dist directory containing your bundled application. You can then zip the contents of the dist folder and upload it to Pogodoc as a new template.

⚠️ Disclaimer: Only the contents of the dist folder should be zipped and not the dist folder itself.